查找拖放到表上的可拖动列表项位置

Question

我创建了一个可拖动的列表项，可以将其下垂在表格上。当放在表格单元格上时，显示表格最左侧(即tbodytrtd:first-child)和最顶端(即：theadtrth:first-child)的位置值。桌子上的每一滴可拖动项目都显示其最左侧和最顶部的位置。此外，在将列表项拖放到表格上时，使其在表格单元格中进一步可搜索，并根据表格列值(最左侧)和表行值(最顶部)找到其位置。

我已经在表格单元格上拖动了一个列表项，并且它可以在表格中进一步拖动，但原始拖动项仍然存在，这不是我所需要的，我想拖动相同的原始可拖动元素并放在另一个表格单元格上。

<script type="text/javascript">         
$(document).ready(function(){
console.log('ready');
var $listItem=$('#sort1 li');             
$(  $listItem ).draggable({
cancel: "a.ui-icon",
revert: "invalid", // when not dropped, the item will revert back to its initial position
containment: "document",
helper: "clone",
cursor: "move",
appendTo: "body",
refreshPositions: true
});           
$( "#sort1" ).selectable();           
$( "#sort1" ).disableSelection();             
var $container=$("#dropdiv table tbody td  ");
console.log($($container));
initDroppable($($container  ));
function initDroppable($elements) {
$elements.droppable({
activeClass: "ui-state-default",
hoverClass: "ui-drop-hover",
accept: ":not(.ui-sortable-helper)", 
over: function (event, ui) {
var $this = $(this); //console.log($this)
}, drop:function (event, ui) {    
var $this = $(this);    
console.log(ui.position)        
var $item = ui.draggable.clone();   
$item.draggable({       cancel:"a.ui-icon",         
revert: 'invalid',      
cursor: "move",         
appendTo: "body",
});   
$(this).addClass('has-drop').append($item);
console.log($item.attr('id')) } })            }           
var $trash=$(' #sort1  li button ');          
$( $trash ).droppable({
cancel: "a.ui-icon",
revert: "invalid", 
containment: "document",
helper: "clone",
cursor: "move",
appendTo: "body",
refreshPositions: true,
drop: function (event, ui) {
var drag_id = $(ui.draggable).attr("id");
var targetElem = $(this).attr("id");
deleteMe = true;            
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("Dropped! inside " + targetElem);
$(ui.helper).remove(); //destroy clone
$(ui.draggable).remove(); //remove from list    
},    
over:function(event,ui){
console.log($(this));
}
});
}       
});   
</script>

我的代码： https://jsfiddle.net/23ptag8j/17/

Answer 1

你想要什么已经很清楚了，但看起来有点奇怪。请考虑以下事项：

https://jsfiddle.net/Twisty/mkz1xLy0/62/

.HTML

<div class="container">
<div id="right">
<div id="dropdiv">
<table border="3 " class="table">
<thead>
<tr>
<th>Day/shift</th>
<th id="shift1">7:15-8:45</th>
<th id="shift2">8:45-9:30</th>
<th id="shift3">9:30-10:15</th>
<th id="shift4">11:00-11:45</th>
<th id="shift5">11:45-12:30</th>
<th id="shift6">12:30-13:15</th>
<th id="shift7">1:15-14:00</th>
</tr>
</thead>
<tbody id="body">
<tr id="con1" class="sortConn">
<td id="row">Sunday</td>
<td class="span drop"><span class="ui-state-default " id="1"></span></td>
<td class="span drop"><span class="ui-state-default" id="2"></span></td>
<td class="span drop"><span class="ui-state-default" id="3"></span> </td>
<td class="span drop"><span class="ui-state-default" id="4"></span></td>
<td class="span drop"><span class="ui-state-default" id="5"></span></td>
<td class="span drop"><span class="ui-state-default" id="6"></span></td>
<td class="span drop"><span class="ui-state-default" id="7"></span></td>
</tr>
<tr id="con2" class="sortConn">
<td id="row">Monday</td>
<td class="span drop"><span class="ui-state-default " id="8"></span></td>
<td class="span drop"><span class="ui-state-default" id="9"></span></td>
<td class="span drop"><span class="ui-state-default" id="10"></span></td>
<td class="span drop"><span class="ui-state-default" id="11"></span></td>
<td class="span drop"><span class="ui-state-default" id="12"></span></td>
<td class="span drop"><span class="ui-state-default" id="13"></span></td>
<td class="span drop"><span class="ui-state-default" id="14"></span></td>
</tr>
<tr id="con3" class="sortConn">
<td id="row">Tuesday</td>
<td class="span drop"><span class="ui-state-default" id="15"></span></td>
<td class="span drop"><span class="ui-state-default" id="16"></span></td>
<td class="span drop"><span class="ui-state-default" id="17"></span></td>
<td class="span drop"><span class="ui-state-default" id="18"></span></td>
<td class="span drop"><span class="ui-state-default" id="19"></span></td>
<td class="span drop"><span class="ui-state-default" id="20"></span></td>
<td class="span drop"><span class="ui-state-default" id="21"></span></td>
</tr>
<tr id="con4" class="sortConn">
<td id="row">Wednesday</td>
<td class="span drop"><span class="ui-state-default" id="22"></span></td>
<td class="span drop"><span class="ui-state-default" id="23"></span></td>
<td class="span drop"><span class="ui-state-default" id="24"></span></td>
<td class="span drop"><span class="ui-state-default" id="25"></span></td>
<td class="span drop"><span class="ui-state-default" id="26"></span></td>
<td class="span drop"><span class="ui-state-default" id="27"></span></td>
<td class="span drop"><span class="ui-state-default" id="28"></span></td>
</tr>
<tr id="con5" class="sortConn">
<td id="row">Thrusday</td>
<td class="span drop"><span class="ui-state-default" id="29"></span></td>
<td class="span drop"><span class="ui-state-default" id="30"></span></td>
<td class="span drop"><span class="ui-state-default" id="31"></span></td>
<td class="span drop"><span class="ui-state-default" id="32"></span></td>
<td class="span drop"><span class="ui-state-default" id="33"></span></td>
<td class="span drop"><span class="ui-state-default" id="34"></span></td>
<td class="span drop"><span class="ui-state-default" id="35"></span></td>
</tr>
<tr id="con6" class="sortConn">
<td id="row">Friday</td>
<td class="span drop"><span class="ui-state-default" id="36"></span></td>
<td class="span drop"><span class="ui-state-default" id="37"></span></td>
<td class="span drop"><span class="ui-state-default" id="38"></span></td>
<td class="span drop"><span class="ui-state-default" id="39"></span></td>
<td class="span drop"><span class="ui-state-default" id="40"></span></td>
<td class="span drop"><span class="ui-state-default" id="41"></span></td>
<td class="span drop"><span class="ui-state-default" id="42"></span></td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="drag-list">
<div id="origin" class="card">
<ul id="sort-1" class="list">
<li id="one">English</li>
<li id="two">Nepali</li>
<li id="three">Economics</li>
</ul>
<button>Trash</button>
</div>
</div>
</div>

.CSS

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.card {
height: 340px;
width: 232px;
margin-left: 20px;
margin-top: 50px;
}
#sort-1 {
list-style: none;
margin: 3px;
margin-bottom: 10px;
}
#sort-1 li {
margin-top: 10px;
}
.list {
margin-left: 5px;
}
#right {
float: right;
margin-right: 20px;
}
.drag-card {
background: #ccc;
color: #000;
border: 1px solid #222;
border-radius: 3px;
padding: 0.2em;
}
.drop-card {
padding: 0;
display: inline-block;
width: 98%;
text-align: center;
}

JavaScript

$(function() {
function makeDrag(el, clone) {
if (clone == undefined) {
clone = false;
}
var $d = $(el).draggable({
cancel: "a.ui-icon",
revert: "invalid",
containment: ".container",
helper: function(e) {
if (clone) {
var cnt = $(e.target).text();
return $("<div>", {
class: "drag-card"
}).html(cnt);
}
return $(e.target);
},
cursor: "move",
appendTo: "body",
refreshPositions: true
});
return $d;
}
var $listItem = $('#sort-1 li');
makeDrag($listItem, true);
$("#sort-1").selectable();
$("#sort-1").disableSelection();
var $dropItems = $("#dropdiv .drop");
initDroppable($dropItems);
function initDroppable($elements) {
$elements.droppable({
classes: {
"ui-droppable-hover": "ui-state-hover"
},
accept: ":not(.ui-sortable-helper)",
drop: function(event, ui) {
var $this = $(this);
var $item = $("<div>", {
class: "drop-card"
})
.html(ui.helper.text());
$("span", $this).append($item);
makeDrag($item);
ui.helper.remove();
}
})
}
var $trash = $('#drag-list button');
$trash.button({
icon: "ui-icon-trash"
})
.click(function(e) {
e.preventDefault();
var retval = confirm("Are you sure you want to empty the trash?");
if (retval) {
// Empty Trash
$trash.removeClass("ui-state-highlight");
}
})
.droppable({
drop: function(event, ui) {
var drag_id = $(ui.draggable).attr("id");
var targetElem = $(this).attr("id");
deleteMe = true;
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("Dropped! inside " + targetElem);
ui.helper.remove();
ui.draggable.remove();
}
});
});

以下是我正在处理的条件：

• 拖放列表中的卡片可以拖到表中;放下时，该项目将附加到该单元格，原始卡片将保留
• 附加到单元格的项目在拖放后应可拖动
• 将项目从一个单元格移动到另一个单元格时，应删除原点
• 将项目拖到"废纸篓"时，应删除原始项目

我为此所做的工作：

• 将类添加到应允许删除该项的所有单元格drop
• 创建了单个函数makeDrag，以使元素可拖动，clone条件默认为false
• 为每个drop单元格添加了唯一 ID 以获得正确的 HTML 语法

更新

https://jsfiddle.net/Twisty/mkz1xLy0/69/

我在drop回调中添加了以下内容：

$this.droppable("disable");
makeDrag($item);
$item.on("dragstart", function(e, ui){
$item.closest(".drop").droppable("enable");
});

如您所见，我们在放置项目时禁用拖放功能。然后，我们在dragstart事件中重新启用它。

我希望这符合您的设计并对您有所帮助。