拖动时jQuery可拖动克隆大小

Posted 2023-05-08

【中文标题】拖动时jQuery可拖动克隆大小

【英文标题】：jQuery draggable clone size while dragging

【发布时间】：2015-03-25 07:49:24

【问题描述】：

我正在开发一个拖放应用程序。我有一个可放置且可拖动的容器。

$( "#dragshock" ).draggable( 
    
        helper: "clone",
        cursor: 'move',
        drag: resizeContainer
    
);

拖拽调用的函数是这个：

function resizeContainer(e, ui) 
    var defaultSize = 108;
    var factor = ((ui.position.top)/19);
    var correcteSize = defaultSize + factor;
    $(this).width(correcteSize);

droppable容器上的函数是这个：

$("#selectedpicture").droppable(
    drop: function (event, ui) 
        var $canvas = $(this);
        if (!ui.draggable.hasClass('canvas-element')) 
            var $canvasElement = ui.draggable.clone();
            $canvasElement.addClass('canvas-element');
            $canvasElement.draggable(
                containment: '#geselecteerdefoto'
            );
            $canvas.append($canvasElement);
            var defaultSize = 108;formaat
            var factor = ((ui.position.top)/19);
            var correcteSize = defaultSize + factor;
            var imgSize = correcteSize;

            $canvasElement.css(
                left: (ui.position.left),
                top: (ui.position.top),
                width: imgSize,
                position: 'absolute'
            );
        
    
);

目前，可拖动对象内的“drag:resizeContainer”行导致被拖动容器在拖动时调整大小，而不是跟随鼠标指针的克隆。

我想要实现的是，在拖动时，对象在容器内向下拖动时已经在视觉上调整大小。放下时，应保持该调整大小。

http://jsfiddle.net/q7zkpc6s/

【参考方案1】：

我找到了解决方案。这比我想的要容易。

将 resizeContainer 中的 $(this).width(correcteSize) 行替换为

$(ui.helper).width(correcteSize);

我将小提琴更新为正确的以供将来参考。