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

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

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

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/

источник

2013-03-26 Husky

Вы пытались подключить один контейнер к другому? –

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

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')});

источник

2013-03-26 10:21:41 ohcibi

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

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

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

источник

2013-03-26 10:16:19

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

ответ

Смежные вопросы