Question

好吧，我觉得应该已经在stackoverflow上询问了这一点，但显然它没有。如何使用没有jQuery使对象可拖动？

我理解如何让一个物体在鼠标悬停时移动，因此它会紧随其后，并尝试将其应用于mousedown而不是mousemove并将其设置为每10毫秒一次，但没有成功。< / p>

所以这就是我所拥有的：

    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

我过去曾经使用过一个非常好的编写代码示例：

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调用draggable和data-drop-target和事件监听器

//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;
        }

<强>摘要

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

如果您有任何其他问题，请告诉我，我会尽力帮助您！

如何拖放对象没有jquery

2 个答案: