» »

Drag and Drop для сайта uCoz


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.01.2017 Просмотров: 312 Комментарий: (10)

Поделиться в социальных сетях

Материал разместил

Комментарий: 10
Brung
Brung 11.01.2017 10:231
0
Сделайте пожалуйста демо нормально, просто не могу зайти, или сильно грузиться сайт или там его нет, не дождался.
iMadeas
iMadeas 11.01.2017 11:242
0
Если долго грузится, значит у вас слабый интернет. Как откроете страницу, крутите вниз, там хомяк. Можете таскать его как хотите. С куки пока проблема, но надеюсь решить в ближайшем будущем.
Tergran
Tergran 11.01.2017 15:003
0
iMadeas, у меня шустрый интернет, но все же напрягает вот эта загрузка. Просто некоторые не будут дожидаться и уйдут, по статистике будет видно, что был уникальный заход, а вот зашел он на сайт, это другое дело.
waak
waak 11.01.2017 20:564
0
Какой смысл в данном скрипте если после обновления страницы всё вернётся на своё место?
добавили бы куки чтоб сохранялась новая позиция к примеру
Kosten
Kosten 11.01.2017 23:205
0
Демонстрацию убрал, не понимаю, зачем ставить на битую ссылку.
waak
waak 11.01.2017 23:266
0
У меня нормально открылся сайт с демо
Kosten
Kosten 11.01.2017 23:367
0
waak, ты о чем, ссылку на demo убрал давно, оставил только на сайт.
waak
waak 12.01.2017 15:289
0
Когда я зашел она ещё была
iMadeas
iMadeas 12.01.2017 11:478
0
Где вы битую ссылку увидели? У людей всё нормально открывается
Kosten
Kosten 12.01.2017 16:4710
0
Ссылка была на ДЕМО, где перешел, а там страница 404 простою
avatar