Question

我目前正致力于我的项目，需要让div能够在某个区域移动。以下是我的代码。

                    <div id="toolbox">
                        <img id="drag1" src="images/3E.png" draggable="true" ondragstart="drag(event)" width="100" height="100">
                        <img id="drag2" src="images/3E-Logo.png" draggable="true" ondragstart="drag(event)" width="100" height="100">
                    </div>`

这是我使用的脚本。

    <script>
    var box = document.getElementById("div1");

    var boxLeft = box.offsetLeft;
    var boxTop = box.offsetTop;
    box.ondrop = drop;
    box.ondragover = allowDrop;

    var img = document.getElementById("drag1");
    img.onmousedown = mousedown;
    img.ondragstart = dragstart;


    var startOffsetX, startOffsetY;

    function allowDrop(ev) {
    ev.preventDefault();
    }


    function mousedown(ev) {
startOffsetX = ev.offsetX;
startOffsetY = ev.offsetY;
    }




    function drag(ev) {
        ev.dataTransfer.setData("text", ev.target.id);
    }

    function drop(ev) {

   ev.preventDefault();
   var data = ev.dataTransfer.getData("text");
   var nodeCopy = document.getElementById(data).cloneNode(true);

   var dropX = ev.clientX - 650;
   var dropY = ev.clientY- 45;
   nodeCopy.setAttribute("style","position:absolute; top:" + dropY + "px; left:" + dropX + "px;");
   nodeCopy.id =  "draggable";
   ev.target.appendChild(nodeCopy);
   ev.stopPropagation();
   return false;

  }

我会将div id =“toolbox”中的图像拖到div id =“box”并在那里复制一下以在框内拖动。而且我还在寻找一种方法来将div框内容保存为图片（jpg文件）。我的项目将基于HTML和JavaScript。任何的想法？感谢。

在div中使div可移动/可拖动

0 个答案: