拖放时,将新元素替换为现有元素,然后将旧元素放回列表中 [英] 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屋!