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

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

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

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>

js:

$(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/


jquery jquery-ui-sortable droppable
person Husky    schedule 26.03.2013    source источник
comment
Вы пытались подключить один контейнер к другому?   -  person Ja͢ck    schedule 26.03.2013

Ответы (2)


arrow_upward
3
arrow_downward

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

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

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

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

$('#drop').sortable({connectWith: $('#selection')});
$('#selection').sortable({connectWith: $('#drop')});
person ohcibi    schedule 26.03.2013

arrow_upward
1
arrow_downward

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

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

демо http://jqueryui.com/sortable/#connect-lists

person David Fregoli    schedule 26.03.2013