0

I have example where I drag-drop elements to drop area. Basically all elements inside this area are cloned. I also want to implement selectable in this area, but there is a problem - how to select elements which are not part of the list?

I want to implement selectable on non-list elements. I've set

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

in droppable div and when I try to select area with mouse, I see lasso, like in this image:

enter image description here

How to select those elements? They are not part of the list, they are dropped clones.

I have example here

Code:

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:

FrenkyB
  • 6,625
  • 14
  • 67
  • 114
  • 1
    How do you know they aren't selected? They *do* have a `ui-selected` class added when they are within the selection lasso, so it looks to me like they are actually selected. Not sure what to do with them from there though. – ehymel May 12 '19 at 01:55
  • haven't noticed that - they are not marked as selected (background color is not changed on those elements). I would like to drag all of them at once. – FrenkyB May 12 '19 at 02:06
  • Looks like you have to implement your own logic after you use the lasso to select multiple. See [this question](https://stackoverflow.com/questions/793559/grouping-draggable-objects-with-jquery-ui-draggable) – ehymel May 12 '19 at 02:14

0 Answers0