Перетащите капюшон с помощью ручки

У меня есть div, который содержит диапазон 16x16px. Я хочу, чтобы событие перетаскивания начиналось, когда пользователь нажимает и перетаскивает этот значок, но он должен перетаскивать весь div. Я пытаюсь следовать этому руководству здесь: http://www.html5rocks.com/en/tutorials/dnd/basics/Перетащите капюшон с помощью ручки

Я не могу понять, как это сделать с помощью ручки. Пожалуйста, придирайтесь.

источник

2014-10-09 Noitidart

Вот рабочий пример: https://jsfiddle.net/pwt1cbjc/

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Drag Handle</title> 
    <style> 
     #draggable { 
      width: 100px; 
      height: 100px; 
      border: 1px solid black; 
     } 
     #handle { 
      width: 0; 
      height: 0; 
      border-right: 20px solid transparent; 
      border-top: 20px solid black; 
      cursor: move; 
     } 
    </style> 
</head> 
<body> 
    <h1>Drag Handle</h1> 

    <div id="draggable" draggable="true"> 
     <div id="handle"> 
     </div> 
    </div> 

    <script> 
     var draggable = document.getElementById('draggable'); 
     var handle = document.getElementById('handle'); 
     var target = false; 
     draggable.onmousedown = function(e) { 
      target = e.target; 
     }; 
     draggable.ondragstart = function(e) { 
      if (handle.contains(target)) { 
       e.dataTransfer.setData('text/plain', 'handle'); 
      } else { 
       e.preventDefault(); 
      } 
     }; 
    </script> 

</body> 
</html>

источник

2015-06-23 13:32:02 SaphuA

Вау спасибо вам это круто, то DIV не перемещается, хотя по капле, можно добавить, что? Также можно добавить слайд-анимацию, когда пользователь перемещается? – Noitidart

Не ожидал, что вам все еще нужен ответ на этот старый вопрос, ха-ха! Пошел случайно, и все равно решил ответить. Об отбрасывании, посмотрите здесь ответ на какой-то пример кода: http://stackoverflow.com/questions/6230834/html5-drag-and-drop-anywhere-on-the-screen – SaphuA

Я пошел об этом по-другому, это было намного более интенсивно (на mousedown я добавил mousemove listener, и на mousemove я бы установил elment 'left',' top', и он следовал за курсором в приятном анимированном виде), ваш путь очень приятный, и я чувствую себя более результативным, и я хотел бы ее адаптировать. – Noitidart

Перетащите капюшон с помощью ручки

ответ

Смежные вопросы