拖放时，将新元素替换为现有元素，然后将旧元素放回列表中 [英] On drag an drop new element replace existing element and put old element back in list

问题描述

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

I am using HTML drag and drop features. I am able to successfully drag and drop my elements from the list. But I want to be able to put back an element in the list and if I drag and drop a second element, the first one should be automatically put back.

截至目前，我的代码没有发生.当我拖动第二个元素来替换第一个元素时，它可以很好地替换元素，但是第一个元素丢失了.我有办法将第一个元素放回列表吗?

As of now with my code that is not happening. When I drag a second element to replace the first one, it replaces the element fine but the first one is lost. Is there a way for me to put the first element back on the list?

我的代码:

$('#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>

您可以证明，如果我先将一个从列表中拖到div.我无法将其拖回列表中.如果我从列表中拖动另一个元素，请说三个.我可以将列表中的 one 替换为 3 ，但是 one 丢失了.有没有办法让它在被替换时重新回到列表中?

As you can attest, if I first drag, one from the list to the div. I am not able to drag it back to put it back on the list. If I drag another element from the list, say three. I am able to replace one on the list with three but the one is lost. Is there a way to put it back on the list in being replaced?

链接到小提琴: FIDDLE

推荐答案

将当前项目放入放置区域(我将ID更改为 #target )，并将其更改为 #list ，然后对项目进行排序:

Take the current item in the drop area (I've changed the id to #target), and it to the #list, and sort the items:

$('#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>

这篇关于拖放时，将新元素替换为现有元素，然后将旧元素放回列表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！