Jquery UI Selectable - 选择多个元素

Posted 2023-05-08

【中文标题】Jquery UI Selectable - 选择多个元素

【英文标题】：Jquery UI Selectable - Selecting multiple elements

【发布时间】：2015-08-29 03:07:03

【问题描述】：

我正在尝试实现一个函数来在我的应用程序中选择多个元素，但是由于我是前端开发的新手，所以我在控制 javascript 的事件和 CSS 时遇到了一些麻烦。我找到了this post，所以我用它作为我的向导。

在使用 Selectable() 函数之前，我添加了一个类（带有一些 CSS），以使我的元素具有被选中的外观（一次单击一个），如果我想取消选择它，我只需单击画布（触发删除“selectedEffect”类的函数）。

但是现在我想选择多个元素（将来我希望能够对它们进行分组），所以我开始使用 Selectable()，正如我所说，我发现那篇文章对我有部分帮助。我能够将这段代码复制到我的项目中：

// this creates the selected variable
// we are going to store the selected objects in here
var selected = $([]), offset = top:0, left:0; 

$( "#canvas > div" ).draggable(
    start: function(ev, ui) 
        editorContent.addClass("hidden");

    if ($(this).hasClass("ui-selected"))
        selected = $(".ui-selected").each(function() 
           var el = $(this);
           el.data("offset", el.offset());
        );
    
    else 
        selected = $([]);
        $("#canvas > div").removeClass("ui-selected");
    
    offset = $(this).offset();
,
drag: function(ev, ui) 
    $(currentElement).removeClass("selectedEffect");
    $(currentArrow).removeClass("selectedArrow");
    var dt = ui.style.top - offset.top, dl = ui.style.left - offset.left;
    // take all the elements that are selected expect $("this"), which is    the element being dragged and loop through each.
    selected.not(this).each(function() 
         // create the variable for we don't need to keep calling $("this")
         // el = current element we are on
         // off = what position was this element at when it was selected, before drag
         var el = $(this), off = el.data("offset");
        el.css(top: off.top + dt, left: off.left + dl);
    );

);

$( "#canvas" ).selectable();

// manually trigger the "select" of clicked elements
$( "#canvas > div" ).click( function(e)
    if (e.metaKey == false) 
        // if command key is pressed don't deselect existing elements
        $( "#canvas > div" ).removeClass("ui-selected");
        $(this).addClass("ui-selecting");
    
    else 
        if ($(this).hasClass("ui-selected")) 
            // remove selected class from element if already selected
            $(this).removeClass("ui-selected");
        
        else 
            // add selecting class if not
            $(this).addClass("ui-selecting");
        
    

  $( "#canvas" ).data("canvas")._mouseStop(null);
);

但是，在实现了这个功能之后，我仍然有一些错误：

无法同时拖动多个选定对象 如果我单击一个元素，然后单击画布（取消选择它），“selectedEffect”不会消失。

【问题讨论】：

有html文件吗？

是的，但是太大了，不能在这里发帖。我认为更好地查看它的唯一方法是转到应用程序的链接

【参考方案1】：

我刚刚想通了。问题是，由于我在画布上添加了动态元素，因此我必须在创建位置的那一刻将以下函数绑定到我的可拖动元素：

 $( "#myNewlyCreatedElement" ).draggable(
     start: function (event, ui) 

         if ($this.hasClass("ui-selected")) 
             // if this is selected, attach current offset
             // of each selected element to that element
             selected = $(".ui-selected").each(function() 
                 var el = $(this);
                 el.data("offset", el.offset());
             );
          else 
             // if this is not selected, clear current selection
             selected = $([]);
             $( "#canvas > div" ).removeClass("ui-selected");
         
         offset = $this.offset();
     ,

     drag: function (event, ui) 
         // drag all selected elements simultaneously
         var dt = ui.position.top - offset.top, dl = ui.position.left - offset.left;
         selected.not(this).each(function() 
             var $this = $(this);
             var elOffset = $this.data("offset");
             $this.css(top: elOffset.top + dt, left: elOffset.left + dl);
         );
     
 );