Выбирается на элементах не из списка - PullRequest
Новая
       30

Выбирается на элементах не из списка

0 голосов
/ 12 мая 2019

У меня есть пример, где я перетаскиваю элементы в область перетаскивания.В основном все элементы внутри этой области клонированы.Я также хочу реализовать selectable в этой области, но есть проблема - как выбрать элементы, которые не являются частью списка?

Я хочу реализовать selectable для элементов, не входящих в список.Я установил 

  $(".ui-layout-center").selectable();

в Droppable DIV и когда я пытаюсь выделить область с помощью мыши, я вижу лассо, как на этом изображении:

enter image description here

Как выбрать эти элементы?Они не являются частью списка, они являются отброшенными клонами.

У меня есть пример здесь

Код: 

function setDraggable(el) {
  el.draggable({
    helper: 'original',
    revert: false,
    cursor: 'move'
  });
}

function setResizable(el){
  el.resizable({

  });
}





$(function() {

  $(".ui-layout-center").selectable();


    $(".component").draggable({

        helper: function() {

          $clone = $(this).clone();
          $clone.appendTo('body').css({'zIndex': 5});
          return $clone;

        },
        cursor: 'copy',
        containment: "document"      
    });

    $('.ui-layout-center').droppable({
        activeClass: 'ui-state-hover',
        accept: '.component',        
        drop: function(event, ui) {

            if (!ui.draggable.hasClass("dropped"))

                var clone= $(ui.draggable).clone().addClass("dropped").draggable();
                if(clone){
                clone.css('left',ui.position.left);    
                clone.css('top',ui.position.top);

                  $(this).append(clone);
                  setDraggable(clone);
                  setResizable(clone);
                }
            }
        });
    });

CSS: 

.ui-layout-center {
    width: 800px;
    height: 800px;
    border: 1px solid black;
}

.ui-state-hover {
    background-color: #f9ffff;   
}

.ui-layout-center .component {
   position:absolute !important;   
}


.component{
  width: 50px;
  height: 50px;
  background-color: yellow;
  border: 1px solid black;
  margin: 3px;
}

HTML:

...