如何拖放对象没有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; 
     } 

摘要

它的长短之处在于可拖动内容需要有某种事件监听器绑定到它才能有效工作。

让我知道如果您有任何其他问题，我会尽我最大的帮助！