Ad

Dynamically Created Elements In Jquery Sortable

- 1 answer

My Code is like this :

$(function  () {
      $("ol.mauDIDROP").sortable({
    group: '.example'
  });
    $("ol.areaDROP").sortable({
    group:  '.example',
    drop: false,
    drag: false,
  });
   $("ol.areaDROP>li>ol").sortable({
      group:  '.example',
      drop: true,

  });
});

Demo & complete code : https://jsfiddle.net/oscar11/15qvta6p/6/

Drag & drop is working

But if :

<li>Single Room<ol></ol></li>
      <li>Double Room<ol></ol></li>
      <li>Family Room<ol></ol></li>

I move to javascript to use append like this : https://jsfiddle.net/oscar11/kdf7xngk/1/

Drag & drop is not working

Any suggestions on how I can solve this problem?

Thank you

Ad

Answer

change your script to:

 $(function() {
   $("ol.areaDROP").append("<li>Single Room<ol><\/p>
 $(function() {
   $("ol.areaDROP").append("<li>Single Room<ol></ol></li><li>Double Room<ol></ol></li><li>Family Room<ol></ol></li>");
   $("ol.mauDIDROP").sortable({
     group: '.example'
   });
   $("ol.areaDROP").sortable({
     group: '.example',
     drop: false,
     drag: false,
   });
   $("ol.areaDROP>li>ol").sortable({
     group: '.example',
     drop: true,

   });
 });
Ad
source: stackoverflow.com
Ad