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

Posted 2023-05-08

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

【英文标题】：jquery added class inside a droppable not becoming resizable if outside drop event

【发布时间】：2013-01-18 00:55:30

【问题描述】：

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

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

【参考方案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>');
    
);

【讨论】：

所有先前放置/克隆的元素必须保持可拖动、可放置和可调整大小。这就是我要解决所有收藏的原因（我想创建一种图像台）。如果我将类“部分”提供给最后删除/克隆并且在外部我解决了集合 $('.part') 提供 droppable/draggable/resizable 它不起作用（我在这里失去了一些东西......如果可以的话，帮助我接着就，随即）。 jquery 也不会在删除一部分后删除 ui-draggable-dragging，所以我每次都必须删除，不仅是当 div 是拖动时。无论如何，选项地图是很好的提示！！！！谢谢！

$('.part').resizable(...) 将仅处理语句执行时存在的那些 .part 元素。在您的非工作代码中，当时不存在 .part 元素；部分，稍后创建，以响应拖放操作。在我的代码中，丢弃的部分将保持可拖动等，而无需重新处理整个 .part() 集合。据我所知，只有新创建的部分需要在创建后立即处理。见updated fiddle。

太棒了！现在一切都清楚了！我会继续我的工作，如果我有更多的麻烦，我希望你能再次帮助我。谢谢！！！