onDrop/onDragOver HTML5 更新 div答案

【问题标题】：onDrop/onDragOver HTML5 update divonDrop/onDragOver HTML5 更新 div
【发布时间】：2013-11-13 19:19:56
【问题描述】：

我正在使用 HTML5 onDrop 和 onDragOver 将图像从一个 div 标签移动到另一个标签。

拖放脚本：

<script>
function allowDrop(ev)
{
ev.preventDefault();
}

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

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>

这里是 div：

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
      <img src="ac.png" draggable="true" ondragstart="drag(event)" id="drag1" width="102" height="71"></div>
    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

我还想在 drop 事件发生时使用这个 jQuery 来显示/隐藏不同的 div。我试图将 .click 更改为 ondrop，但没有成功。我该怎么做？

<script>
// Wait for the document to load
$(document).ready(function() {
    // When one of our nav links is clicked on,
    $('#nav a').click(function(e) {
        div_to_activate = $(this).attr('href'); // Store its target
        $('.content:visible').hide(); // Hide any visible div with the class "content"
        $(div_to_activate).show(); // Show the target div
    });
});
</script>

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

我假设您正在尝试使用 jQuery 切换由 drop 事件触发的 div 的可见性：

DEMO

JS：

$(document).ready(function() {
  $('#div2').on("drop", function(e) {
    e.preventDefault();
    e.stopPropagation();
    if ($("#undropped:visible")) {
      $("#dropped").show();
      $("#undropped").hide();
    }
  });
});

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

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

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("Text");
  ev.target.appendChild(document.getElementById(data));
}

HTML：

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<div id="undropped"><img src="https://placeholdit.imgix.net/~text?txtsize=13&txt=UNDROPPED&w=102&h=71"></div>

<div id="dropped"><img src="https://placeholdit.imgix.net/~text?txtsize=13&txt=DROPPED&w=102&h=71"></div>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=DRAG&w=102&h=71" draggable="true" ondragstart="drag(event)" id="drag1" width="102" height="71"></div>

CSS：

#div1 {
  clear: left;
}

#div2 {
  float: left;
  border: 1px solid #CCC;
  margin-bottom: 10px;
  height: 71px;
  width: 102px;
}

#undropped {
  margin-left: 10px;
  border: 1px solid #CCC;
  margin-bottom: 10px;
  height: 71px;
  width: 102px;
  float: left;
}

#dropped {
  margin-left: 10px;
  border: 1px solid #CCC;
  margin-bottom: 10px;
  height: 71px;
  width: 102px;
  float: left;
  display: none;
}

【讨论】：