在拖放新元素时替换现有元素并将旧元素放回列表中

Question

我正在使用 HTML 拖放功能。我能够成功地从列表中拖放我的元素。但是我希望能够放回列表中的一个元素，如果我拖放第二个元素，第一个元素应该会自动放回。

到目前为止，我的代码还没有发生。当我拖动第二个元素来替换第一个元素时，它很好地替换了元素，但第一个元素丢失了。有没有办法让我把第一个元素放回列表中？

我的代码：

$('#drag1, #drag2, #drag3').on('dragstart', function(e) {
    e.originalEvent.dataTransfer.setData('text', e.target.id);
});

$('#div1').on('drop', function(e) {
    e.preventDefault();
    let data = e.originalEvent.dataTransfer.getData('text');
    $('#div1').html($(`#${data}`));
});

$('#div1').on('dragover', function(e) {
    e.preventDefault();
});

#div1 {
    width: 350px;
    height: 70px;
    padding: 10px;
    border: 1px solid #aaaaaa;
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  

<br />
<div id="div1" class='ml-2'></div>
<br />
<ul class='list-group d-inline-block ml-2'>
  <li id="drag1" class='list-group-item py-1' draggable='true'>one</li>
  <li id="drag2" class='list-group-item py-1' draggable='true'>two</li>
  <li id="drag3" class='list-group-item py-1' draggable='true'>three</li>
</ul>

如您所见，如果我先将 one 从列表拖到 div。我无法将其拖回以将其放回列表中。如果我从列表中拖出另一个元素，比如 three。我可以用 three 替换列表中的 one 但 one 丢失了。有没有办法把它放回被替换的列表中？

Link 到 fiddle：FIDDLE

Answer 1

在拖放区中取出当前项目（我已将 id 更改为 #target），并将其放入 #list，然后对项目进行排序：

$('#list').on('dragstart', 'li', function(e) {
  e.originalEvent.dataTransfer.setData('text', e.target.id);
});

var $target = $('#target');
var $list = $('#list');

$target.on('drop', function(e) {
  e.preventDefault();
  let data = e.originalEvent.dataTransfer.getData('text');
  $list.append($target.html());
  $target.html($(`#${data}`));
  /* ignore this block if you don't care about the order */
  $list.append(
    $list
      .children('li')
      .toArray()
      .sort((a, b) => +a.dataset.order - +b.dataset.order)
  );
  /*******************************************************/
});

$target.on('dragover', function(e) {
  e.preventDefault();
});

#target {
  width: 350px;
  height: 70px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>


<br />
<div id="target" class='ml-2'></div>
<br />
<ul id="list" class='list-group d-inline-block ml-2'>
  <li id="drag1" class='list-group-item py-1' draggable='true' data-order="1">one</li>
  <li id="drag2" class='list-group-item py-1' draggable='true' data-order="2">two</li>
  <li id="drag3" class='list-group-item py-1' draggable='true' data-order="3">three</li>
</ul>

在拖放新元素时替换现有元素并将旧元素放回列表中

On drag an drop new element replace existing element and put old element back in list

javascript

html

jquery

ecmascript-6

drag-and-drop