Drag and Drop для сайта uCoz
 | |
| Подобный способ можно часто встретить на сайтах элитных интернет-магазинов, где для того чтобы купить товар, его нужно "захватить" и перенести к себе в корзину. На упрощенных сайтах, чтобы купить товар нужно просто кликнуть в определенном месте или поставить галочку и товар сам перенесется в вашу корзинку, но согласитесь, сейчас это уже не столь современно. Рассмотрим самый простой вариант способа перетаскивания. Установка: Разметку, как и весь код целиком, вы можете установить в любое место на своем сайте, так как он имеет абсолютное позиционирование. И так, Код <span class="drag_obj" onmousedown="drag_object(event, this)">здесь размещаем картинку, блок или еще что-нибудь</span> CSS Код .drag_obj { position:absolute; cursor:move; text-align:center; z-index:999;} JS Код function drag_object( evt, obj ) { evt = evt || window.event; obj.clicked = true; obj.mousePosX = evt.clientX; obj.mousePosY = evt.clientY; if( evt.preventDefault ) evt.preventDefault(); else evt.returnValue = false; document.onmouseup = function(){ obj.clicked = false } // обработка координат указателя document.onmousemove = function( evt ) { evt = evt || window.event; if( obj.clicked ) { posLeft = !obj.style.left ? obj.offsetLeft : parseInt( obj.style.left ); posTop = !obj.style.top ? obj.offsetTop : parseInt( obj.style.top ); mousePosX = evt.clientX; mousePosY = evt.clientY; obj.style.left = posLeft + mousePosX - obj.mousePosX + 'px'; obj.style.top = posTop + mousePosY - obj.mousePosY + 'px'; obj.mousePosX = mousePosX; obj.mousePosY = mousePosY; } } } function setcookie( name, value, timeout ) { timeout = timeout || 1000*60*60*24; expires = (new Date((new Date).getTime() + timeout)).toUTCString(); document.cookie = name + '=' + value + ';expires=' + expires; } Расписывать не стал за ненадобностью. Для более любознательных представлю ссылки на статью и демо страничку: Подробное описание материала | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 10 | |
|
| |
