jquery在droppable中添加了类，如果在drop事件之外，则不会变得可调整大小

Question

当在这个放置区域中放置东西时，该对象将被克隆并获得零件类。

$('.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”类提供可移动/可拖动/可调整大小的属性，而无需在放置事件内部执行此操作，而是在外部定义它？因为让它工作的唯一方法就是给这个内部 drop 函数。

工作

$('.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/

Answer 1

通过在 drop 处理程序中寻址 jQuery 集合 $('.part')，您将使用 class="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>');
    }
});