1

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>

また、この 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>
4

1 に答える 1

0

jQueryを使用してドロップイベントによってトリガーされたdivの可視性を切り替えようとしていたと仮定しています:

デモ

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;
}
于 2016-01-21T17:32:42.003 に答える