Question

你好，我是一名需要帮助的初学者：）

我希望设置简单的html / css页面。我想在前景上放置一个div，一个稍微透明的图像，在这个背后，在后台还有一些其他div可以独立拖动。我在这里添加了一个小图画，在这篇文章的底部，直观地解释了我想要的设置，以便给出一个更好的主意。

我在.mousedown事件中想过，但我尝试使用.trigger并且找不到为独立可拖动div设置它的方法...... 怎么了，有可能设置吗？这个功能有什么好处？

<script>
  $('#imageA').mousedown(function(ev) {
  $('#imageB,#imageC,#imageD').trigger(ev);
  } );
</script>

little drawing

非常感谢您的帮助！甲

Answer 1

拖放如何工作的基本示例。

<!DOCTYPE html>
<html lang=en>
<head>
<title>Using Drag and Drop API to copy and move elements</title>
<!-- 
   This example demonstrates using various HTML Drag and Drop interfaces including:
   * Global "draggable" attribute
   * Event handlers for dragstart, dragover and drop
   * Global event handlers for ondragstart, ondragover and ondrop
   * Using the DataTransfer interface to copy and move elements (<div>)
-->
<style>
  div {
    margin: 0em;
    padding: 2em;
  }
  #src_copy, #src_move  {
    color: blue;
    border: 5px solid black;
    width: 300px;
    height: 50;
  }
  #dest_copy, #dest_move {
    border: 5px solid blue;
    width: 300px;
    height: 50;
  }
</style>
<script>
function dragstart_handler(ev) {
 console.log("dragStart");
 // Change the source element's background color to signify drag has started
 ev.currentTarget.style.border = "dashed";
 // Add the id of the drag source element to the drag data payload so
 // it is available when the drop event is fired
 ev.dataTransfer.setData("text", ev.target.id);
 // Tell the browser both copy and move are possible
 ev.effectAllowed = "copyMove";
}
function dragover_handler(ev) {
 console.log("dragOver");
 // Change the target element's border to signify a drag over event
 // has occurred
 ev.currentTarget.style.background = "lightblue";
 ev.preventDefault();
}
function drop_handler(ev) {
  console.log("Drop");
  ev.preventDefault();
  // Get the id of drag source element (that was added to the drag data
  // payload by the dragstart event handler)
  var id = ev.dataTransfer.getData("text");
  // Only Move the element if the source and destination ids are both "move"
  if (id == "src_move" && ev.target.id == "dest_move")
    ev.target.appendChild(document.getElementById(id));
  // Copy the element if the source and destination ids are both "copy"
  if (id == "src_copy" && ev.target.id == "dest_copy") {
   var nodeCopy = document.getElementById(id).cloneNode(true);
   nodeCopy.id = "newId";
   ev.target.appendChild(nodeCopy);
  }
}
function dragend_handler(ev) {
  console.log("dragEnd");
  // Restore source's border
  ev.target.style.border = "solid black";
  // Remove all of the drag data
  ev.dataTransfer.clearData();
}
</script>
</head>
<body>
<h1>Drag and Drop: Copy and Move elements with <code>DataTransfer</code></h1>
 <div draggable="true" id="src_copy" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);">
     Select this element and drag to the <strong>Copy Drop Zone</strong>.
 </div>
 <div id="dest_copy" ondrop="drop_handler(event);" ondragover="dragover_handler(event);"><strong>Copy Drop Zone</strong></div>
 <div draggable="true" id="src_move" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);">
     Select this element and drag to the <strong>Move Drop Zone</strong>.
 </div>
 <div id="dest_move" ondrop="drop_handler(event);" ondragover="dragover_handler(event);"><strong>Move Drop Zone</strong></div>
</body>
</html>

如果您需要更多帮助，请访问MDN Web Docs - HTML Drag and Drop API

Jquery / mousedown +拖放div背景

1 个答案: