Question

我有一个大的元素显示在屏幕上，我希望能够放在较小的放置目标上。因此，我想减小可拖动克隆的大小以匹配放置目标的大小。我觉得动画这个很好看。在拖动时，我似乎无法让较小的克隆围绕光标居中。有任何想法吗？这是我试过的： http://jsfiddle.net/a3Cj2/

$( ".draggable" ).draggable({
    helper: 'clone',
    start : function(event, ui){
        ui.helper.animate({
            width: 80,
            height: 50
        });
    }, 
    drag : function(event, ui){
        ui.helper.offset({
             left: event.pageX,
             top: event.pageY
        });
    }
});

$("#target").droppable({
    drop : function(event, ui) {
       console.log('dropped');     
    }
});

Answer 1

到目前为止最简单的方法是使用cursorAt选项，将'left'和'top'设置为缩小帮助器尺寸的一半。

$(".draggable").draggable({
    helper: 'clone',
    start: function (e, ui) {
        ui.helper.animate({
            width: 80,
            height: 50
        });
    },
    cursorAt: {left:40, top:25}
});

<强> Updated fiddle

Answer 2

哇，这比我想象的要多得多！这是修复：

$( ".draggable" ).draggable({
    helper: 'clone',
    start : function(event, ui){
        ui.helper.animate({
            width: 80,
            height: 50,
            marginLeft: (300-80)/2 - (300/2 - event.offsetX),
            marginTop: (200-50)/2 - (200/2 - event.offsetY)
        });
    }, 
    drag : function(event, ui){

    }
});

$("#target").droppable({
    drop : function(event, ui) {
       console.log('dropped');     
    }
});

您需要根据两个尺寸的可拖动中心之间的差异来考虑事件位置并将其居中。

See fiddle here

如何使用较小的克隆生成JQuery Draggable？

2 个答案: