CODEWITHSUNDEEP
javascriptjqueryhtmlcss
moses toh
moses toh

Reputation: 13192

How to drag/drop element from box 1 to box 2 with jquery sortable?

My Code is like this :

HTML : 

<div class="content">
    box 1 (Customer)
    <ol class='example limited_drop_targets default vertical'>
      <li>Valentino Rossi<ol></ol></li>
      <li>David Beckham<ol></ol></li>
      <li>Eden Hazard<ol></ol></li>
    </ol>
</div>

<div class="content">
    box 2 (Room Type)
    <ol class='example limited_drop_targets default vertical'>
      <li>Single Room<ol></ol></li>
      <li>Double Room<ol></ol></li>
      <li>Family Room<ol></ol></li>
    </ol>
</div>

Javascript : 

  $(function  () {
          $("ol.example").sortable();
        });

Demo/complete code is like this : https://jsfiddle.net/oscar11/x0q81hfq/

I take from here : https://johnny.github.io/jquery-sortable/

Drag/drop element from box 1 to box 2 not working

I look for the code in the documentation does not exist

How to drag/drop element from box 1 to box 2 with jquery sortable?

Thank you very much

Upvotes: 0

Views: 120

Answers (2)

mark_c
mark_c

Reputation: 1212

You need to add them to the same group:

$(function() {
    $("ol.example").sortable({
        group: "example"
    });
});

https://jsfiddle.net/mark_c/pw6rs8t1/1/

Upvotes: 2

Christos Hrousis
Christos Hrousis

Reputation: 715

We first visit the examples page for the plugin and see if we can find any documentation that helps explain if the the plugin supports the functionality you are looking for.

After a quick look we fine can pass in a "group" which accepts class so you're code changes like so:

$(function() {
  $("ol.example").sortable({
    group: '.example'
  });
});

Upvotes: 2

Related Questions