jquery - jquery 可拖动/可放置

Question

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

提前感谢您的任何指点。

Answer 1

这可以通过在可放置对象的“放置”回调中向可拖动对象添加“包含”选项来完成。例如：

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

在上面的选项中，一旦项目被实际放下，drop 回调就会触发并导致可拖动项目被约束到“包含”选项中的项目。