Главная » Файлы » Прочие скрипты » Яваскрипты |
Делаем перемещаемыми любые элементы сайта
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 | |
Просмотров: 428 | Загрузок: 0 | |
Всего комментариев: 0 | |
| |