JQuery - проблема с сортировкой div

Я абсолютно новичок в JQuery и в целом для всей веб-разработки. Я пытаюсь перетащить некоторые элементы div (+ их содержимое) из левого элемента div (#selection) в правый элемент div (#drop), а затем сделать их сортируемыми в разделе #drop. Я выполнил перетаскивание, но затем они не сортируются в '#drop' div, хотя я реализовал необходимый код.

Исходный код:

HTML структура:

 <body class="doc">
    <div id="header">Business Entry</div>
    <div id="content">
      <div id="selection">
        <div id="dragTelNr" class="draggableElement">
          Telephone Number
        </div>
        <div id="address" class="draggableElement">
          Address
        </div>
      </div>
      <div id="drop">

      </div>
      <div class="clear"></div>
    </div>
  </body>

ЯШ:

$(document).ready(function () {

  $.fn.exists = function () {
    return this.length !== 0;
  }

  var ids = new Array();
  ids[0] = 1;
  ids[1] = 1;

  var nextSibling;
  var draggableOptions = { opacity: 0.6, revert: true, containment: '#content', zIndex: 100};

  $('.draggableElement').draggable({opacity: 0.6, revert: true, containment: '#content', zIndex: 100,
    start: function(event, ui){
      //nextSibling = ui.helper.next();
    }
  });

  $('#drop').droppable({
    hoverClass: '.dropHover',
    accept: '.draggableElement',
    activate: function(event, ui){
      nextSibling = ui.draggable.next();    
    },
    drop: function(event, ui){

      var draggable = ui.draggable;

      if (draggable.parent().attr('id') != 'drop'){

        var draggableId = draggable.attr('id');

        if (nextSibling.exists() == false){
          $( '<div id = "' + draggableId + '" class="draggableElement"></div>' ).html( ui.draggable.html()).draggable(draggableOptions).appendTo('#selection');
          alert("Insert at the end " + nextSibling);  
        }
        else{
          $( '<div id = "' + draggableId + '" class="draggableElement"></div>' ).html( ui.draggable.html()).draggable(draggableOptions).insertBefore(nextSibling);
            alert("Insert before " + nextSibling); 
        }

        switch(draggableId){
          case 'dragTelNr':
            alert(draggable.attr('id'));
            draggable.attr('id', draggableId + ids[0]).appendTo($(this));
            alert(draggable.attr('id'));
            ids[0]++;
            break;

          case 'address':
            alert(draggable.attr('id'));
            draggable.attr('id', draggableId + ids[1]).appendTo($(this));
            alert(draggable.attr('id')); 
            ids[1]++;
            break;     
        }
      }  
    }

  }); 

  $('#drop').sortable();
  //$('#drop').dissableSelection();
});

CSS:

.doc  {
  margin:auto; /* center in viewport */
  width: 1000px; /* fix page width */
}

#header {
    height: 80px;
    width: 990px;
    background:#efefef;
    border: 1px solic black;
    text-align: center; 
    font: bold 180% arial;
    padding: 1em;
}

#selection { 
  width: 300px; 
  height: 500px; 
  border: 1px solid black; 
  float: left; 
  background-color: #D3D3D3;
  text-align:center;
}

#drop { 
  width: 670px; 
  height: 500px; 
  border: 1px solid black; 
  float: left;
  text-align: center;
}


.clear { 
  clear: both;
} 

#content {
  width: 990px; 
  height: 500px;     
}

.draggableElement {
  line-height: 1.286;
  margin-top: 1.286em;
  margin-bottom: 1.286em;
  border: 2px solid black;


}

.dropHover{
  border: 3px solid black;
}

Кстати, библиотеки были правильно импортированы, поэтому проблема не в этом. Если бы у кого-то были какие-то предложения, как заставить это работать, я был бы очень благодарен.

Вот ссылка на мой исходный код: http://jsfiddle.net/Bt23y/

Источник

2 ответа

Решение

Я почистил твою скрипку, чтобы сосредоточиться на важных вещах:

http://jsfiddle.net/Bt23y/1/

Если вы хотите иметь возможность перетаскивать элементы из одного списка в другой, делая их сортируемыми, вы можете использовать connectWith из jqueryUI's sortable

<ul id="selection">
    <li>Item1</li>        
    <li>Item2</li>
</ul>
<ul id="drop"></ul>

$('#drop').sortable({connectWith: $('#selection')});
$('#selection').sortable({connectWith: $('#drop')});
Источник

"Сортировать элементы из одного списка в другой и наоборот, передав селектор в параметр connectWith. Самый простой способ сделать это - сгруппировать все связанные списки с помощью класса CSS, а затем передать этот класс в сортируемую функцию (т. Е. connectWith: '.myclass')."

   $('.sortableContainer).sortable({
       ...
       connectWith: ".sortableContainer",
       ...
    })

демо http://jqueryui.com/sortable/

Источник
Другие вопросы по тегам