Суть эффекта заключается в том, что кликнув правой кнопкой мыши на любой объект:картинку, текст, блок и т.д, его можно перетащить в любое место страницы и там и оставить
Использовать такие перемещения можно по-разному и опять же оригинально. Объекты остаются на своих новых местах до первого ребута страницы
Итак рассмотрим код эффекта перемещения на примере перетаскивания картинок
Для этого нам надо будет добавить класс и описание к нему в CSS, а так же залить в файловый менеджер сайта созданный файл js
CSS: Панель управления - Управление дизайном - CSS - прописываем следующий код
Код
.aw{
position:relative;
cursor:hand;
z-index: 100;
}
Далее js
Код
var awobject={
z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null, awapproved : 0,
initialize:function(){
document.onmousedown=this.aw
document.onmouseup=function(){this.awapproved=0}
},
aw:function(e){
var evtobj=window.event? window.event : e
this.targetobj=window.event? event.srcElement : e.target
if (this.targetobj.className=="aw"){
this.awapproved=1
if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}
if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}
this.offsetx=parseInt(this.targetobj.style.left)
this.offsety=parseInt(this.targetobj.style.top)
this.x=evtobj.clientX
this.y=evtobj.clientY
if (evtobj.preventDefault)
evtobj.preventDefault()
document.onmousemove=awobject.moveit
}
},
moveit:function(e){
var evtobj=window.event? window.event : e
if (this.awapproved==1){
this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px"
this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px"
return false
}
}
}
awobject.initialize()
Создаем js файл на компьютере с этим содержанием и заливаем его в ФМ, получаем в итоге ссылку типа /webcombo2.js
Далее в ФМ заливаем картинки к которым хотим применить эффект
Далее подключаем js
Код
<script language="JavaScript" type="text/javascript" src="http://webanetlabs.net/webcombo2.js"></script>
Далее в нужное место вставляем картинку и задаем ей стиль
Код
<img src="http://webanetlabs.net/ng2013/zaxzax.gif" class="aw">
Готовый код эффекта будет выглядеть так
Код
<script language="JavaScript" type="text/javascript" src="http://webanetlabs.net/webcombo2.js"></script>
<img src="http://webanetlabs.net/ng2013/zaxzax.gif" class="aw">
А вот и сама готовая картинка, которую можно погонять по экрану
