1

これら3つのプラグインをすべて組み合わせようとしていますが、ドロップされたアイテムにresizeable（）を追加する際に問題が発生しています。

ドロップして＃container2に複製できるアイテムを含む＃container1があります。＃container2にドロップされた後、複製されたアイテムは＃container2にドラッグ可能に含まれ、サイズ変更できる必要があります。ドラッグアンドドロップはうまく機能しますが、$ canvasElement.resizable（）を追加すると、ドロップされた要素の幅と高さが0pxになります。

$（関数（）{

$("#container1 img").draggable({
    helper: 'clone',
    cursor: 'move'
});

$("#container2").droppable({
    accept: 'img',
    drop: function (event, ui) {
        var $canvas = $(this);
        if (!ui.draggable.hasClass('canvas-element')) {
            var $canvasElement = ui.draggable.clone();
            $canvasElement.addClass('canvas-element');
            $canvasElement.resizable();
            $canvasElement.draggable({
                containment: '#container2'
            });
            $canvas.append($canvasElement);
            $canvasElement.css({
                left: (ui.position.left),
                top: (ui.position.top),
                position: 'absolute'
            });
        }
    }
});

}）;

4

1 に答える 1

4

このJQFAQ.comトピックを見てください。これは、UIドラッグ可能、ドロップ可能、およびサイズ変更可能を組み合わせるのに役立ちます。その他のサンプルFAQもいくつかあります。

于 2012-11-17T14:40:47.240 に答える