Jquery: 在容器之间移动一个可拖动元素
Jquery: Move a draggable element among containers
在 JQuery 中,我试图将一个元素从 Draggable 拖动到具有多个单元格的 Droppable table,然后在这些单元格之间拖动元素,如本演示中所示 http://fiddle.jshell.net/c6vL61fb/4/
但是,我遇到了一个问题,即元素仅在第一次从可拖动移动到可放置时自动定位 table,但之后不会从一个单元格移动到另一个单元格。我该如何解决这个问题。非常感谢。
HTML
<div id="products">
<div class="ui-widget-content">
<img id="photo1" class="product" src="http://s4.postimg.org/fh1l9dae1/high_tatras_min.jpg" width="96" height="72">
</div>
</div>
<div id="cont">
<p>Container</p>
<table id="container" width="100%" border="1">
<tr height="100px">
<td id='hello1' class='hello ui-widget-content' width="50%"> </td>
<td id='hello2' class='hello ui-widget-content' width="50%"> </td>
</tr>
<tr height="100px">
<td id='hello3' class='hello ui-widget-content' width="50%"> </td>
<td id='hello4' class='hello ui-widget-content' width="50%"> </td>
</tr>
</table>
</div>
Javascript
$(function () {
$(".hello")
.droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function(event, ui) {
var self = $(this);
var productid = ui.draggable.attr("id");
if (self.find("[id=" + productid + "]").length) return;
$(this).append($(ui.draggable).clone());
var cartid = self.closest('.hello').attr('id');
$(".hello:not(#"+cartid+") [id="+productid+"]").remove();
}
})
.sortable();
$(".product").draggable({
appendTo: 'body',
helper: 'clone'
});
});
您只需在删除元素时删除样式即可。所以下面一行:
$(this).append($(ui.draggable).clone());
必须改为
$(this).append($(ui.draggable).clone().removeAttr('style'));
在 JQuery 中,我试图将一个元素从 Draggable 拖动到具有多个单元格的 Droppable table,然后在这些单元格之间拖动元素,如本演示中所示 http://fiddle.jshell.net/c6vL61fb/4/
但是,我遇到了一个问题,即元素仅在第一次从可拖动移动到可放置时自动定位 table,但之后不会从一个单元格移动到另一个单元格。我该如何解决这个问题。非常感谢。
HTML
<div id="products">
<div class="ui-widget-content">
<img id="photo1" class="product" src="http://s4.postimg.org/fh1l9dae1/high_tatras_min.jpg" width="96" height="72">
</div>
</div>
<div id="cont">
<p>Container</p>
<table id="container" width="100%" border="1">
<tr height="100px">
<td id='hello1' class='hello ui-widget-content' width="50%"> </td>
<td id='hello2' class='hello ui-widget-content' width="50%"> </td>
</tr>
<tr height="100px">
<td id='hello3' class='hello ui-widget-content' width="50%"> </td>
<td id='hello4' class='hello ui-widget-content' width="50%"> </td>
</tr>
</table>
</div>
Javascript
$(function () {
$(".hello")
.droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function(event, ui) {
var self = $(this);
var productid = ui.draggable.attr("id");
if (self.find("[id=" + productid + "]").length) return;
$(this).append($(ui.draggable).clone());
var cartid = self.closest('.hello').attr('id');
$(".hello:not(#"+cartid+") [id="+productid+"]").remove();
}
})
.sortable();
$(".product").draggable({
appendTo: 'body',
helper: 'clone'
});
});
您只需在删除元素时删除样式即可。所以下面一行:
$(this).append($(ui.draggable).clone());
必须改为
$(this).append($(ui.draggable).clone().removeAttr('style'));