Draggable without jQuery

Question

Я искал код JavaScript, чтобы сделать div draggable, и единственное, что я нашел, это то, что вам нужно было загрузить jQuery, есть ли способ сделать div перетаскиваемым без jQuery с помощью JavaScript.

Answer 1

Да, есть. Но вам придется иметь дело с различиями в браузерах.

http://www.w3.org/html/wg/drafts/html/master/editing.html#dnd

Я настоятельно рекомендую вам использовать JQuery. Нет причин, почему нет.

Answer 2

С JQuery было организовано Google, нет необходимости загрузки это только ссылаться на него как таковой:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script> 

Более подробную информацию о Google принимала JQuery здесь: http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/

Однако, если вы так отчаянно использовать чистые JS, я высоко рекомендую этот учебник: http://tech.pro/tutorial/650/javascript-draggable-elements

Answer 3

Абсолютно. Перетаскивание на самом деле довольно просто. Там есть ряд шагов к нему, но вот выбега:

• Во-первых, чтобы сделать элемент перетаскивать, просто добавьте атрибут draggable так:
  <div draggable="true">. Обратите внимание, что изображения и ссылки перетаскиваются по умолчанию - в некоторых случаях вам может понадобиться установить атрибуты draggable="false".

• Теперь вам нужно что-то сделать, когда их таскают. Установите для элемента прослушиватель событий dragstart. В этом случае вы, вероятно, хотите включить такой код:

evt.dataTransfer.clearData(); // clear any default data 
evt.dataTransfer.setData("Text","This is some text"); 
somevar = this; // store the element being dragged 

• Далее вам нужно обрабатывать то, что происходит, когда вы перетащите элемент на действительной цели. Это единственная часть, которая немного сложна, поскольку для этого есть два события: dragenter и dragover. Первый срабатывает, когда вы на самом деле вводите цель, тогда как второй пожар, такой как mousemove, делает. Вы обычно хотите одно и то же событие для обоих. В этом случае, чтобы сделать цель на правильную точку падения, вы должны вызвать evt.preventDefault() и return false (потому что действие по умолчанию, чтобы не допустить падения)

• Наконец, прикрепить drop событие к целевому элементу. Это событие будет запущено при удалении элемента, который вы перетаскиваете в соответствующей области.

При желании вы также можете добавить событие dragend к исходному элементу. Это будет запущено, если элемент больше не перетаскивается, независимо от того, успешно ли он был удален или нет. Существует также dragleave, если вы удаляетесь от цели падения.

Если вам нужна дополнительная помощь, сообщите мне, но я надеюсь, что это объяснило, как это сделать.И теперь, чрезвычайно простой пример:

<div id="source" draggable="true" style="background:#f88">Drag me</div> 
<div id="target" style="background:#88f;padding:5px">Drop here</div> 
<script type="text/javascript"> 
    var source = document.getElementById('source'), 
     target = document.getElementById('target'), 
     dragging = null, // the element being dragged 
     addEvent = function(source,types,handler) { 
      // this is just a standard cross-browser event registration function 
      // it can handle more than one type at once 
      var typearr = types.split(" "), l = typearr.length, i; 
      for(i=0; i<l; i++) { 
       if(source.addEventListener) 
        source.addEventListener(typearr[i],handler,true); 
       else 
        source.attachEvent("on"+typearr[i],handler,true); 
      } 
     }; 
    addEvent(source,"dragstart",function(evt) { 
     evt = evt || window.event; 
     evt.dataTransfer.clearData(); 
     dragging = this; 
     setTimeout(function() {dragging.style.opacity=0.5;},1); 
     //^tiny pause so browser can get the right drag image 
    }); 
    addEvent(target,"dragenter dragover",function(evt) { 
     if(dragging) { 
      this.style.backgroundColor = "#8f8"; 
      evt = evt || window.event; 
      if(evt.preventDefault) evt.preventDefault(); 
      return false; 
     } 
    }); 
    addEvent(target,"dragleave",function() {this.style.backgroundColor = "#88f";}); 
    addEvent(target,"drop",function() { 
     if(dragging) { 
      this.appendChild(dragging); 
      this.style.backgroundColor = "#88f"; 
      dragging = null; 
      if(evt.preventDefault) evt.preventDefault(); 
      return false; 
     } 
    }); 
    addEvent(source,"dragend",function() {this.style.opacity=1;}); 
</script> 

И here является Скрипки.