JQuery сортируемыми портлетов + создание динамических новых портлетов

Question

упростить вопрос, давайте предположим, что мы используем точно такой же код, чем Jquery UI портлетов виджет:

http://jqueryui.com/sortable/#portlets

я прочитал еще одну нить о теме в StackOverflow , но это на самом деле не дает мне ни малейшего понятия о том, как подойти к решению, так как исходный код не имеющийся больше

jQuery How to add a portlet

позволяет себе S implest способ добавления нового портлет существующего столбца:

$("#col0").append($('<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" id="p5">' + 
       '<div class="portlet-header ui-widget-header ui-corner-all">' + 
       '<span class="ui-icon ui-icon-minusthick"></span>' + "my title" + '</div>' + 
       '<div class="portlet-content">' + "my content" + '</div></div>')) 

с этим подходом, у меня есть на важные вопросы:

1. кнопку «+» на правом углу заголовка не работает новые портлеты.

2. текст заголовка и содержимого не остается внутри div. когда текст достигает края div, он продолжается снаружи.

3. Я пытаюсь получить порядок портлетов с таким подходом, полученным здесь в stackoverflow. Он работает, когда вы просто загружаете приложение с помощью портлетов jquery по умолчанию.

   $(".column").sortable({ 
   
   connectWith: ".column", 
   delay: 150, 
   
   start: function(event, ui) { 
        ui.item.startPos = ui.item.index(); 
        item = ui.item; 
        newList = oldList = ui.item.parent(); 
   }, 
   stop: function(event, ui) { 
        /*saveOrder();*/   
        console.log("Start position: " + ui.item.startPos); 
        console.log("New position: " + ui.item.index()); 
   }, 
   change: function(event,ui) { 
        if(ui.sender) newList = ui.placeholder.parent(); 
   

   },

до и после того, как я добавить новый портлет, когда я пытаюсь получить сортируемые элементы столбцов:

$("#obtain").button().click(function() { 
     console.log($("#col0").sortable('toArray').toString());}); 

это дает мне нужное количество элементов за один столбец (новый добавлен), но когда я пытаюсь переместить новый между столбцами, когда вы создаете новые динамически, позиция в столбцах не имеет смысла. я думаю, что его вроде я должен снова выполнить функцию start() каждый раз, когда я создаю новый портлет, поэтому я могу получить нужный индекс. Но я не знаю, как подойти к нему.

большое спасибо за ваше время, и я надеюсь, что я могу получить некоторые советы,

приветы

Answer 1

Для # 1 Я думаю, вы пропустили класс портлет-тумблер

<span class="ui-icon ui-icon-minusthick"> 

должно быть

<span class='ui-icon ui-icon-minusthick portlet-toggle'>