JQuery UI Selectable - выбор нескольких элементов

Question

Я пытаюсь реализовать функцию для выбора нескольких элементов в моем приложении здесь, но поскольку я новичок в разработке интерфейса, у меня возникают некоторые проблемы с управлением событиями 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); 
}); 

Но, после реализации этой функции, я все еще имеет некоторые ошибки:

1. Не в состоянии перетащить несколько выделенных объектов одновременно
2. Если я нажму один элемент, а затем нажмите холст (чтобы отменить его выбор), «selectedEffect» не исчезнет.

Answer 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}); 
     }); 
    } 
});