Drag non-selectee div within jquery selectable

Question

I'm trying to make a jquery selectable that makes some elements selectable using filter, but also have some other elements with a different class be available for dragging (but I am not trying to make the same elements selectable and draggable).

Here is a basic example: the goal is to be able to drag the first 'x' (which is a div with class .boundary) into the second 'x' and get some feedback, while the divs A, B, C (with class .tok) are normally selectable. These two things should not interact with each other: A B and C should be selectable, and each 'x' should be draggable.

I don't need the 'x' divs to be fully mobile, or even change position at all, just to drag from one into the other, maybe see each x I pass highlighted in some way, and get the information which x was dragged into which when I drop.

#selectable .ui-selecting {
  background: #FECA40;
}

#selectable .ui-selected {
  background: #F39814;
  color: white;
}

.tok {
  display: inline-block;
  margin: 1px
}

.boundary {
  display: inline-block;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script>
  $(function() {
    $("#selectable").selectable({
      filter: '.tok'
    });
  });

  // Option 1: with jquery draggable
  $(".boundary").draggable();

  // Option 2: bind dragstart etc.
  $(document).ready(function() {
    $('.boundary').on("dragstart", function(event) {
      alert('drag started');
    });
    $('.boundary').on("dragenter dragover drop", function(event) {
      event.preventDefault();
      alert(event.type);
    });
  })
</script>

<div id="selectable">
  <div id="t1" class="tok">A</div>
  <div id="b1" class="boundary">x</div>
  <div id="t2" class="tok">B</div>
  <div id="b2" class="boundary">x</div>
  <div id="t3" class="tok">C</div>
</div>

The dragging and selecting seem to work. Is this the part that's causing you trouble? "...see each x I pass highlighted in some way, and get the information which x was dragged into which when I drop." — showdev
– showdev, Commented Mar 25, 2020 at 21:08
@showdev You're absolutely right, and it works fine in the Stackoverflow Run code snippet. Diffing the rendered HTML I figured out the problem: I had put the .draggable() outside of the $(document).ready by accident, and I had the HTML after the JS in the file, so the class I was applying it to must not have existed yet... I was able to fix it now, thanks! — azeldes
– azeldes, Commented Mar 26, 2020 at 19:33
Sorry, my edit quietly resolved that issue. I've re-edited to restore your original content. — showdev
– showdev, Commented Mar 30, 2020 at 3:06
Actually it was very helpful, since it allowed me to diff the working example against my code. Thanks! — azeldes
– azeldes, Commented Mar 31, 2020 at 15:16

azeldes · Accepted Answer · 2020-03-26 19:38:08Z

0

I'm leaving an answer rather than deleting the question, in case someone else makes a similar mistake: the .draggable() should be invoked after the relevant elements exist, so placing that in $(document).ready or making sure the relevant HTML part is already serialized is necessary.

The code snippet in this question demonstrates a selectable containing unselectable elements which are draggable - this example might be useful to others, since I was not able to easily find such an example.

answered Mar 26, 2020 at 19:38

azeldes

3132 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Drag non-selectee div within jquery selectable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related