1

このドロップ領域に何かをドロップすると、オブジェクトが複製され、パーツクラスを取得します。

$('.drop').droppable({
    tolerance: 'fit',
    accept: '.drag, .part',
    drop: function (event, ui) {
        var top = ui.position.top;
        var left = ui.position.left;
        var posizione = ui.position;

        if ($(ui.helper).hasClass('drag') ) {
            $(this).append($(ui.helper).clone());
            $('#board .drag').addClass("part");
            $('.part').removeClass("drag");
        };
       ....
)};

ドロップイベント内でこれを行うことなく、「パーツ」クラスにドープ可能/ドラッグ可能/サイズ変更可能なプロパティを与える方法がありますが、それを外部で定義しますか？それを機能させる唯一の方法は、その内部ドロップ関数を与えることだからです。

仕事

$('.drop').droppable({
    tolerance: 'fit',
    accept: '.drag, .part',
    drop: function (event, ui) {
        var top = ui.position.top;
        var left = ui.position.left;
        var posizione = ui.position;

        if ($(ui.helper).hasClass('drag') ) {
            $(this).append($(ui.helper).clone());
            $('#board .drag').addClass("part");
            $('.part').removeClass("drag");
        };

        $('.part').resizable({
            containment: "#board",
            aspectRatio: true
        });
        ....
)};

うまくいかない

$('.drop').droppable({
    tolerance: 'fit',
    accept: '.drag, .part',
    drop: function (event, ui) {
        var top = ui.position.top;
        var left = ui.position.left;
        var posizione = ui.position;

        if ($(ui.helper).hasClass('drag') ) {
            $(this).append($(ui.helper).clone());
            $('#board .drag').addClass("part");
            $('.part').removeClass("drag");
        };

        ....
)};
$('.part').resizable({
            containment: "#workarea",
            aspectRatio: true
});

私はjavascriptとjqueryを初めて使用するので、他のエラーを見つけた場合は報告してください。助けてくれてありがとう。

編集：完全なコードhttp://jsfiddle.net/funnydj/qtBfJ/2/

4

1 に答える 1

0

ハンドラー$('.part')内のjQueryコレクションをアドレス指定することにより、ドキュメント内のすべての要素に。を使用して影響を与えます。dropclass="part"

通常、ドロップ/クローンされたばかりの要素をアドレス指定するだけでよく、その要素が指定されていることを考えるとclass="part"、アドレス指定する必要があるのはそれだけだと思います。以前にドロップ/クローンされたすべての要素は、すでに適切な処理を受けているはずです。

私が正しいなら、あなたはおそらくこのようなものが欲しいでしょう：

$('.drop').droppable({
    tolerance: 'fit',
    accept: '.drag, .part',
    drop: function (event, ui) {
        var top = ui.position.top;
        var left = ui.position.left;
        var posizione = ui.position;

        if(ui.helper.hasClass('drag') ) {
            var $part = ui.helper.clone().removeClass("drag ui-draggable-dragging").addClass("part");
            $part.appendTo($(this));
            $part.resizable({
                containment: "#board",
                aspectRatio: true
            });
            $part.draggable({
                tolerance: 'fit',
                revert: 'invalid', //resterà non valido finchè non droppo in un punto valido
                containment: "#workarea",
                stop: function () {
                    var top2 = ui.position.top;
                    var left2 = ui.position.left;
                    $("#workarea").append('<div>spostata</div>');
                    $(this).draggable('option', 'revert', 'invalid'); //quando lo lascio torna indietro perche' il revert è invalid'
                }
            });
            $part.droppable({
                greedy: true,
                //tolerance: 'intersect',
                drop: function (event, ui) {
                    if (!$(ui.helper).hasClass('part')) {
                        ui.draggable.draggable('option', 'revert', true);
                    }
                }
            });
        };
        inserite++;
        $("#workarea").append('<div>' + top + '-' + left + '--' + inserite + '</div>');
    }
});

オプションマップを外部スコープで定義することで大幅に整理できますが、内部で適用する必要があります。

私はおそらくこのようなことをするでしょう：

var inserite = 0;

part_options = {
    resizable: function(ui) {
        return {
            ...
        }
    },
    draggable: function(ui) {
        return {
            ...
        }
    },
    droppable: function(ui) {
        return {
            ...
        }
    }
};


$('.drop').droppable({
    tolerance: 'fit',
    accept: '.drag, .part',
    drop: function (event, ui) {
        var top = ui.position.top;
        var left = ui.position.left;
        var posizione = ui.position;

        if(ui.helper.hasClass('drag') ) {
            var $part = ui.helper.clone().removeClass("drag ui-draggable-dragging").addClass("part");
            $part.appendTo($(this));
            $part.resizable(part_options.resizable.call(this, ui));
            $part.draggable(part_options.draggable.call(this, ui));
            $part.droppable(part_options.droppable.call(this, ui));
            //or one long chained command if you prefer.
        };
        inserite++;
        $("#workarea").append('<div>' + top + '-' + left + '--' + inserite + '</div>');
    }
});
于 2013-02-03T01:58:59.140 に答える