在非列表元素上可选

Question

我有一个示例，其中我将元素拖放到区域中。基本上，此区域内的所有元素都将被克隆。我也想在此区域实现selectable，但是有一个问题-如何选择不属于列表的元素？

我想在非列表元素上实现选择。我已经设置

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

在可放下的div中，当我尝试用鼠标选择区域时，我看到套索，如下图所示：

如何选择那些元素？它们不属于列表，而是已删除的克隆。

我有个例子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：