Главная » Файлы » Прочие скрипты » Яваскрипты

Делаем перемещаемыми любые элементы сайта
23.06.14, 08:23:32



При помощи этого скрипта вы можете сделать абсолютно любые элементы сайта перетаскиваемыми, будь это картинки, отдельные слова или даже целые блоки

Для начала посмотрите ДЕМО

Установка:

На нужных вам страницах после /head вставляйте:
Код
<style type="text/css">  
  .drag{  
  position:relative;  
  cursor:hand;  
  z-index: 100;  
  }  
  </style>  

  <script type="text/javascript">  
  /***********************************************  
  * Drag and Drop Script: © Dynamic Drive (http://www.dynamicdrive.com)  
  * This notice MUST stay intact for legal use  
  * Visit http://www.dynamicdrive.com/ for this script and 100s more.  
  ***********************************************/  
  var dragobject={  
  z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null, dragapproved : 0,  
  initialize:function(){  
  document.onmousedown=this.drag  
  document.onmouseup=function(){this.dragapproved=0}  
  },  
  drag:function(e){  
  var evtobj=window.event? window.event : e  
  this.targetobj=window.event? event.srcElement : e.target  
  if (this.targetobj.className=="drag"){  
  this.dragapproved=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=dragobject.moveit  
  }  
  },  
  moveit:function(e){  
  var evtobj=window.event? window.event : e  
  if (this.dragapproved==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  
  }  
  }  
  }  

  dragobject.initialize()  
  </script>


Подготовка скрипта закончена. Для того, чтобы сделать какой-либо элемент перетаскиваемым, достаточно ему добавить класс drag. Вот несколько примеров:

Код
<img src="Ссылка на картинку" class="drag">  
  <div class="drag">Здесь любой контент, который будет перемещаемым</div>  
  <b class="drag">Простой перемещаемый текст</b>


Материал подготовил Apocalypse
Категория: Яваскрипты | Добавил: Apocalypse | Теги: перемещаемыми, любые, сайта, элементы, делаем
Просмотров: 397 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: