有没有办法拖动和复制，但用“可拖动”防止拖放？ (JavaScript)答案

【问题标题】：Is there a way to drag and copy, but prevent the drop with "draggable"? (JavaScript)有没有办法拖动和复制，但用“可拖动”防止拖放？ (JavaScript)
【发布时间】：2021-05-14 15:42:48
【问题描述】：

现在我有一个功能性的拖放和复制。我想知道是否有任何方法可以拖动副本，但不能拖放。例如，如果用户按住 shift 键，他/她可以快速单击并放下克隆而不放下拖动的元素。如果通过文档搜索高低并没有找到任何东西。

这是我的代码https://jsfiddle.net/jado66/f8b4ms36/2/：

<!DOCTYPE html>
<html>
<head>
  <title>Drag Copy</title>
</head>
<style>

* {user-select: none; } 
.cell {width:50px;height:50px;
  }
img {width:50px;height:50px;cursor: move;}
table td #dropTable td:hover{background: #dedede;}
#dropTable {
    border-spacing: 5px;
    border: 1px solid #dedede;
}
.droppable:hover{
    transform: scale(1.05);
    transition-duration: 0.3s;
}

#dropTable tbody { height:300px; overflow-y:auto;  }

</style>

<body>
   

     <!-- Drag Table -->
    
        <table style="border-spacing: 5px;">
            <tr>
                <td id="image1">
                    <div class = "cell" ondrop="drop(event)" ondragover="allowDrop(event)">
                        <img class = "droppable newGate" src="droppable" src="https://picsum.photos/500/500?random=1"   
                      ondragstart="dragStart(event)" id="1" draggable="true"/> </div>
                </td>
                <td id="image2">
                    <div class = "cell " ondrop="drop(event)" ondragover="allowDrop(event)">
                        <img class = "droppable" src="https://picsum.photos/500/500?random=2"   
                      ondragstart="dragStart(event)" id="2" draggable="true" /> </div>
                </td>
    
            </tr>
        </table>
        <hr>
        <!-- Drop Table -->
        <table>
            <tr>
                <td>
                    <table id="dropTable" >
                    <tr >
                        <td> <div class = "cell"></div></td> 
                        <td> <div class = "cell" ></div></td>
                        <td> <div class = "cell" ></div></td>
                        <td> <div class = "cell" ></div></td>
                    </tr>
                    <tr>
                        <td> <div class = "cell" ></div></td>
                        <td> <div class = "cell" ></div></td>
                        <td> <div class = "cell" ></div></td>
                        <td> <div class = "cell" ></div></td>
                    </tr>
                    </tr>
                        <td> <div class = "cell" ></div></td>
                        <td> <div class = "cell" ></div></td>
                        <td> <div class = "cell" ></div></td>
                        <td> <div class = "cell" ></div></td>
                    </tr>
                    </table>
                </td>
            </tr>
        </table>
    <script>
    
const cells = document.querySelectorAll(".cell:empty"); //We only want to add event listeners to empty cells
for (const cell of cells){
    cell.addEventListener('dragover',allowDrop);
    cell.addEventListener('drop',drop);
}

function dragStart(evt)
{
    evt.dataTransfer.setData("Text",evt.target.id);
}

function drop(evt)
{
    var data = evt.dataTransfer.getData("Text");
    var nodeCopy = document.getElementById(data).cloneNode(true);
    nodeCopy.id = Date.now(); /* We cannot use the same ID */
    evt.target.appendChild(nodeCopy);
    
    if (evt.shiftKey){
        console.log("Shift key pressed. Copy but keep drag");
      //Invoke drag command, or prevent drop, etc.
    }
}

function allowDrop(ob)
{
    ob.preventDefault();
}
    
    </script>
    </body>
    </html>

【问题讨论】：

您的拖放和复制工作正常。那么问题是什么？

标签： javascript html drag-and-drop draggable

【解决方案1】：

简而言之，没有

回答您的问题是否可以在用户释放鼠标按钮时阻止 drop 事件：否。

来自the spec：

否则，如果用户结束拖放操作（例如在鼠标驱动的拖放界面中释放鼠标按钮），或者如果拖动事件被取消，那么这将是最后一个迭代。

但是，当用户放下节点时，可能会立即触发一个新的 DragStart 事件，但我无法让它工作。在规范中找不到任何关于不可能的内容，但我可能是错的。

针对您的特定用例的解决方法

这只是一个概念验证，代码看起来不太好，我确定它有错误，但它可以满足您的要求：https://jsfiddle.net/y9Lpxdea/3/。按住 shift 键并拖动插槽以克隆当前持有的对象。

通过将要从onDragStart 克隆的元素的ID 存储在一个变量中（不是在DataTransfer 对象中作为DataTransfer.getData() is only accessible on the drop event），您可以访问当前持有对象的ID onDragEnter 事件，然后从那里复制孩子。我保留了当前的拖放功能，没有按原样按住 shift 键。

let dragId = null;

function dragStart(evt)
{
    evt.dataTransfer.setData("Text",evt.target.id);
    dragId = evt.target.id;
}

function dragEnter(evt)
{
    if (evt.shiftKey && dragId){
        var nodeCopy = document.getElementById(dragId).cloneNode(true);
        nodeCopy.id = Date.now(); /* We cannot use the same ID */
        evt.target.innerHTML = "";
        evt.target.appendChild(nodeCopy);
    }
}

function drop(evt)
{
    var data = evt.dataTransfer.getData("Text");
    var nodeCopy = document.getElementById(data).cloneNode(true);
    nodeCopy.id = Date.now(); /* We cannot use the same ID */
    evt.target.appendChild(nodeCopy);
    dragId = null;
}

【讨论】：