我是一个完整的jQuery和Javascript noob试图让一个非常简单的拖放现场演示工作。我越来越接近,但我的拖拽元素被给予绝对定位,所以它们不能很好地融合在一起。
标记非常简单:
<section class="favrecentboxessection" id="favorites">
little divs with the style set to draggable
</section>
<section class="favrecentboxessection" id="recents">
where they are dragged to
</section>
我悲伤的小jQuery:
$( init );
var $favorites = $( "#favorites" ),
$recent = $( "#recent" );
function init() {
$('.favrecentbox').draggable( {
cursor: 'move',
containment: '#mainsection',
stack: '.favrecentbox',
revert: 'invalid',
revertDuration: 200,
} );
$('.favrecentboxessection').droppable( {
accept: ".favrecentbox",
activeClass: 'ui-state-highlight',
drop: function (event, ui) {
handleDropEvent (ui.draggable);
}
} );
function handleDropEvent( $item ) {
var temp;
temp = $item.detach();
temp.appendTo( $('#favorites'));
我已经进行了拖动工作,但是当它被丢弃时,它们会进行绝对定位(左,上等设置)。我怎么把它关掉?
答案 0 :(得分:1)
您可以尝试使用$(x).css()在删除后操作CSS .....
答案 1 :(得分:1)
不需要让它比现在更复杂。 删除CSS似乎是一个坏主意。
请参阅:http://jsfiddle.net/MPy9n/6/
draggableOptions = { appendTo: "body", zIndex: 99};
$( ".favrecentbox" ).draggable(draggableOptions);
$( ".favrecentboxessection" ).droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function( event, ui ) {
console.log(ui);
$( ui.draggable ).remove();
$( '<div class="favrecentbox"></div>' ).html( ui.draggable.html() ).draggable(draggableOptions).appendTo( this );
}});
答案 2 :(得分:0)
您可以在放弃时将其作为子项添加到droppable容器中。
$('.favrecentboxessection').droppable( {
accept: ".favrecentbox",
drop: function(ev, ui) {
$(this).append($(ui.draggable));
$(ui.draggable).css({position:'relative'});
},
activeClass: 'ui-state-highlight',
drop: function (event, ui) {
handleDropEvent (ui.draggable);
}
} );