jquery draggable / droppable

Question

对以下任何帮助将不胜感激。我需要在一个可放置的盒子外面有一张照片。用户应该能够将图片拖到框中，一旦图片在框内，用户仍然可以拖动它，但只能在框内。

提前感谢您的任何指示。

Answer 1

这可以通过向droppable对象的“drop”回调中的可拖动对象添加“containment”选项来完成。例如：

$(function() {
    $( "#draggable" ).draggable();
    $( "#droppable" ).droppable({
        drop: function( event, ui ) {
            $( this )
                .addClass( "ui-state-highlight" )
                .find( "p" )
                .html( "Dropped!" );
            $( "#draggable" ).draggable({containment:"#droppable"});
        }  });
});

在上面的选项中，一旦项目实际被删除，drop回调将触发并导致可拖动项目被约束到“containment”选项中的项目。