HTML5拖放-仅在每个放置区的项目上

Question

我有一些div作为拖放区，有些有可拖动对象。

<div class="container">
   <div class="drop"></div>
   <div class="drop"></div>
   <div class="drop"></div>
</div>
<div class="container">
    <div class="drag" id="drag-a" draggable="true">box a</div>
    <div class="drag" id="drag-b" draggable="true">box b</div>
    <div class="drag" id="drag-c" draggable="true">box c</div>
</div>
<style>
.drop {
    border: 1px solid #000;
    height: 40px;
    margin: 5px;
    width: 200px;
}
.drag {
    background: #000;
    color: #fff;
    display: inline-block;
    margin: 5px;
    padding: 5px;
    user-select: none;
}
</style>
<script>
$(document).ready(function () {
    $('.drop').on('dragover', function(e){
        e.preventDefault();
    });
    $('.drag').on('dragstart', function(e) {
        e.originalEvent.dataTransfer.setData('Text', e.target.id);
    });
    $('.drop').on('drop', function(e) {
        e.preventDefault();
        var data = e.originalEvent.dataTransfer.getData('Text');  
        e.target.appendChild(document.getElementById(data));
    });
});
</script>

使用本机HTML5拖放和jQuery可以正常工作。现在，我想将dropzone限制为一项。不可能再将另一个拖放到该区域，但是我不知道如何。

两个可拖动的框是否有可能交换其位置？

Answer 1

您只需要删除该元素的事件处理程序即可，在jQuery中，您可以使用`.off()进行操作。

$('.drop').on('drop', function(e) {
    e.preventDefault();
    var data = e.originalEvent.dataTransfer.getData('Text');  
    e.target.appendChild(document.getElementById(data));
    // add this line
    $(this).off('dragover drop');
});

$(document).ready(function () {
    $('.drop').on('dragover', function(e){
        e.preventDefault();
    });
    $('.drag').on('dragstart', function(e) {
        e.originalEvent.dataTransfer.setData('Text', e.target.id);
    });
    $('.drop').on('drop', function(e) {
        e.preventDefault();
        var data = e.originalEvent.dataTransfer.getData('Text');  
        e.target.appendChild(document.getElementById(data));
        $(this).off('dragover drop');
    });
});

.drop {
    border: 1px solid #000;
    height: 40px;
    margin: 5px;
    width: 200px;
}
.drag {
    background: #000;
    color: #fff;
    display: inline-block;
    margin: 5px;
    padding: 5px;
    user-select: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
   <div class="drop"></div>
   <div class="drop"></div>
   <div class="drop"></div>
</div>
<div class="container">
    <div class="drag" id="drag-a" draggable="true">box a</div>
    <div class="drag" id="drag-b" draggable="true">box b</div>
    <div class="drag" id="drag-c" draggable="true">box c</div>
</div>

重新启动拖放功能

即使将每个放置区限制为一个框，这也是常见的情况，允许用户删除放置的框并放置另一个框。

首先，您应该将匿名函数处理程序转换为命名函数声明，以便能够重用它们。

然后，允许box容器接受拖放操作。

最后，当用户在容器中放置一个框时，请在任意空的放置区中再次为drop和dragover事件添加处理程序。

注意：这次，我修改了一些类的名称，以使其更加清晰。

var dragOverHandler = function(e) {
  e.preventDefault();
};
var dropOnDropZoneHandler = function(e) {
  e.preventDefault();
  var data = e.originalEvent.dataTransfer.getData('Text');
  e.target.appendChild(document.getElementById(data));
  $(this).off('dragover drop');
};
var dropOnBoxContainerHandler = function(e) {
  e.preventDefault();
  var data = e.originalEvent.dataTransfer.getData('Text');
  e.target.appendChild(document.getElementById(data));
  $('.dropzone').each(function() {
    if ($(this).is(':empty')) {
      $(this).on('dragover', dragOverHandler);
      $(this).on('drop', dropOnDropZoneHandler);
    }
  });
}

$(document).ready(function() {
  $('.box').on('dragstart', function(e) {
    e.originalEvent.dataTransfer.setData('Text', e.target.id);
  });
  $('.dropzone, #boxContainer').on('dragover', dragOverHandler);
  $('.dropzone').on('drop', dropOnDropZoneHandler);
  $('#boxContainer').on('drop', dropOnBoxContainerHandler);
});

.dropzone, #boxContainer {
  border: 1px solid #000;
  height: 40px;
  margin: 5px;
  width: 200px;
}

.box {
  background: #000;
  color: #fff;
  display: inline-block;
  margin: 5px;
  padding: 5px;
  user-select: none;
}

#boxContainer {
  background-color: #AAA;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="dropzone"></div>
  <div class="dropzone"></div>
  <div class="dropzone"></div>
</div>
<div id="boxContainer">
  <div class="box" id="drag-a" draggable="true">box a</div>
  <div class="box" id="drag-b" draggable="true">box b</div>
  <div class="box" id="drag-c" draggable="true">box c</div>
</div>