如何拖放對象沒有jquery

Question

好吧，我覺得這應該已經問stackoverflow，但顯然它沒有。你如何使一個對象不使用jQuery拖動？

我明白如何使對象在鼠標懸停的過程中移動，所以它會緊跟着它，並試圖將其應用於mousedown而不是mousemove，並將其設置爲每10毫秒的間隔，但沒有成功。

因此，這裏是我：

document.querySelector(".box").addEventListener(function(e) { 
     let s = document.querySelector(".box"); 
     var e = e || window.event; 
     let run = setInterval(function() { 
     s.style.marginLeft = e.clientX + "px"; 
     s.style.marginTop = e.clientY + "px"; 
     getMouseCoords(e); 
     }, 10); 
    }); 

那麼我將如何拖動並沒有任何下降的jQuery的對象？

Answer 1

請按照此。它只使用純JavaScript。 只要你可以拖動DIV內容

<div id="draggable-element">Drag me!</div> 

Link for Draggable Project

Answer 2

還有就是我已經在過去用於此一個很好的codepen例如：

https://codepen.io/byronglover/pen/oxjgEK

第1步 - 創建物品容器

<!--First Drop Target--> 
<div data-drop-target="true"> 
    <div id="box1" draggable="true" class="box navy"></div> 
    <div id="box2" draggable="true" class="box red"></div> 
    <div id="box3" draggable="true" class="box green"></div> 
    <div id="box4" draggable="true" class="box orange"></div> 
    <div id="box5" draggable="true" class="box navy"></div> 
    <div id="box6" draggable="true" class="box red"></div> 
    <div id="box7" draggable="true" class="box green"></div> 
    <div id="box8" draggable="true" class="box orange"></div> 
</div> 

<!--Second Drop Target--> 
<div data-drop-target="true"></div> 

第2步 - 應用一些javascript調用拖動和數據放置目標和事件偵聽器

//Function handleDragStart(), Its purpose is to store the id of the draggable element. 
    function handleDragStart(e) { 
     e.dataTransfer.setData("text", this.id); //note: using "this" is the same as using: e.target. 
    }//end function 


    //The dragenter event fires when dragging an object over the target. 
    //The css class "drag-enter" is append to the targets object. 
    function handleDragEnterLeave(e) { 
     if(e.type == "dragenter") { 
      this.className = "drag-enter" 
     } else { 
      this.className = "" //Note: "this" referces to the target element where the "dragenter" event is firing from. 
     } 
    }//end function 



    //Function handles dragover event eg.. moving your source div over the target div element. 
    //If drop event occurs, the function retrieves the draggable element’s id from the DataTransfer object. 
    function handleOverDrop(e) { 
     e.preventDefault(); 
    //Depending on the browser in use, not using the preventDefault() could cause any number of strange default behaviours to occur. 
     if (e.type != "drop") { 
      return; //Means function will exit if no "drop" event is fired. 
     } 
     //Stores dragged elements ID in var draggedId 
     var draggedId = e.dataTransfer.getData("text"); 
     //Stores referrence to element being dragged in var draggedEl 
     var draggedEl = document.getElementById(draggedId); 

     //if the event "drop" is fired on the dragged elements original drop target e.i.. it's current parentNode, 
     //then set it's css class to ="" which will remove dotted lines around the drop target and exit the function. 
     if (draggedEl.parentNode == this) { 
      this.className = ""; 
      return; //note: when a return is reached a function exits. 
     } 
     //Otherwise if the event "drop" is fired from a different target element, detach the dragged element node from it's 
     //current drop target (i.e current perantNode) and append it to the new target element. Also remove dotted css class. 
     draggedEl.parentNode.removeChild(draggedEl); 
     this.appendChild(draggedEl); //Note: "this" references to the current target div that is firing the "drop" event. 
     this.className = ""; 
    }//end Function 



    //Retrieve two groups of elements, those that are draggable and those that are drop targets: 
    var draggable = document.querySelectorAll('[draggable]') 
    var targets = document.querySelectorAll('[data-drop-target]'); 
//Note: using the document.querySelectorAll() will aquire every element that is using the attribute defind in the (..) 


    //Register event listeners for the"dragstart" event on the draggable elements: 
    for(var i = 0; i < draggable.length; i++) { 
     draggable[i].addEventListener("dragstart", handleDragStart); 
    } 

    //Register event listeners for "dragover", "drop", "dragenter" & "dragleave" events on the drop target elements. 
    for(var i = 0; i < targets.length; i++) { 
     targets[i].addEventListener("dragover", handleOverDrop); 
     targets[i].addEventListener("drop", handleOverDrop); 
     targets[i].addEventListener("dragenter", handleDragEnterLeave); 
     targets[i].addEventListener("dragleave", handleDragEnterLeave); 
    } 

，最後一些CSS來將其結合在一起

h2 { 
    color: #a7a3a4; 
    margin-left: 80px; 
} 

[data-drop-target] { 
      height: 400px; 
      width: 200px; 
      margin: 25px; 
      background-color: gainsboro; 
      float: left; 
     } 
     .drag-enter { 
      border: 2px dashed #000; 
     } 
     .box { 
      width: 100px; 
      height: 100px; 
     float: left; 
     } 
    .box:nth-child(3) { 
     clear: both; 
    } 
     .navy { 
      background-color: navy; 
     } 
     .red { 
      background-color: firebrick; 
     } 
    .green { 
      background-color: darkgreen; 
     } 
     .orange { 
      background-color: orange; 
     } 

摘要

它的長短之處在於可拖動內容需要有某種事件監聽器綁定到它纔能有效工作。

讓我知道如果您有任何其他問題，我會盡我最大的幫助！