我目前正在开发一项功能,该功能需要同时组合所有可放置,可拖动和可排序的功能。下面是我的测试代码。很抱歉,因为我无法为此代码获取jsfiddle。 Droppable和Draggable运行正常。
问题:我越来越难以在可放置div中进行水平排序。如果有人可以帮助/指导我将其与排序列表中元素的索引/位置一起使用,无论该元素位于第一,第二等位置,我将不胜感激。
HTML:
<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
<li class="ui-widget-content ui-corner-tr">
<div class="ui-widget-header">High Tatras 1</div>
</li>
<li class="ui-widget-content ui-corner-tr">
<div class="ui-widget-header">High Tatras 2</div>
</li>
<li class="ui-widget-content ui-corner-tr">
<div class="ui-widget-header">High Tatras 3</div>
</li>
<li class="ui-widget-content ui-corner-tr">
<div class="ui-widget-header">High Tatras 4</div>
</li>
</ul>
<div id="trash" class="ui-widget-content ui-state-default">
<ul id = "sortable" class='gallery ui-helper-reset sortable'></ul>
</div>
上面是我用作测试数据的HTML代码。
JQuery:以下是我当前正在使用的Jquery代码。
var $gallery = $( "#gallery" ),
$trash = $( "#trash" );
// let the gallery items be draggable
$( "li", $gallery ).draggable({
cancel: "a.ui-icon", // clicking an icon won't initiate dragging
revert: "invalid", // when not dropped, the item will revert back to its initial position
containment: "document",
helper: "clone",
cursor: "move"
});
// let the trash be droppable, accepting the gallery items
$trash.droppable({
accept: "#gallery > li",
activeClass: "ui-state-highlight",
drop: function( event, ui ) {
addToContainer( ui.draggable );
}
});
// let the gallery be droppable as well, accepting items from the trash
$gallery.droppable({
accept: "#trash li",
activeClass: "custom-state-active",
drop: function( event, ui ) {
RemoveFromContainer( ui.draggable );
}
});
function addToContainer( $item ) {
$item.fadeOut(function() {
var $list = $( "ul", $trash );
$item.appendTo($list).fadeIn(function() {
$item
.addClass('ui-state-default')
.find( "div .ui-widget-header" )
.animate({ height: "36px"});
});
});
$( ".sortable" ).sortable({
connectWith: "#sortable"
}).disableSelection();
}
function RemoveFromContainer( $item ) {
$item.fadeOut(function() {
$item
.find( "a.ui-icon-refresh" )
.remove()
.end()
.css( "width", "96px")
.find( "img" )
.css( "height", "72px" )
.end()
.appendTo( $gallery )
.fadeIn();
});
}
// resolve the icons behavior with event delegation
$( "ul.gallery > li" ).click(function( event ) {
var $item = $( this ),
$target = $( event.target );
if ( $target.is( "a.ui-icon-trash" ) ) {
addToContainer( $item );
} else if ( $target.is( "a.ui-icon-refresh" ) ) {
RemoveFromContainer( $item );
}
return false;
});
请让我知道我是否缺少某些内容,并且未能发布正确的问题。我对stackoverflow进行了一些研究,但仍然找不到确切的解决方案。提前非常感谢您。
最佳答案
使用2 sortable
并将彼此的connectWith
属性设置为:
var $gallery = $("#gallery"),
$trash = $("#trash");
$("#gallery").sortable({
connectWith: "#trash",
helper: "",
revert: "invalid",
start: function (event, ui) {
var $item = ui.helper;
$item.css({
'width': $('#gallery li').width()
});
},
stop: function (event, ui) {
//get what you want here
}
});
$('#trash').sortable({
placeholder: "ui-state-highlight",
connectWith: '#gallery',
revert: true,
cursor: "move",
items: "li",
drop: function (event, ui) {
},
stop: function (event, ui) {
var $obj = $(ui.item);
//get what you want here
}
});
尝试工作 fiddle :
http://jsfiddle.net/mw3Pn/2/