Jquery Ui Перетаскивание проблемы

Question

Я разрабатываю плагин для панели инструментов с jquery и функциональностью перетаскивания из jquery ui. Идея заключается в следующем: у меня есть список (ul) и элементы (li), где каждый из них представляет такой инструмент, как текст, геометрическая фигура и т. Д. когда я перетаскиваю инструмент, а затем опускаю его на контекст, должен быть создан «виджет». Проблема в том, что после того, как инструмент был уронен на контейнер, он больше не доступен из перетаскивания. Функция перетаскивания работает только один раз.

Надеюсь, вы можете помочь мне. Извините за мой английский.

вот код

Плагин

    (function($){

//Attach this new method to jQuery
$.fn.extend({ 

    //This is where you write your plugin's name
    spkToolbar: function(options) {

        //Set the default values, use comma to separate the settings, example:
        var defaults = {
            isDraggable:false
            ,droppableDiv:undefined
        };

        var options =  $.extend(defaults, options);
        //Iterate over the current set of matched elements
        return this.each(function() {
            var o = options;
            $(this).addClass('toolbar');
            if(o.isDraggable)
                $('.toolbar').draggable();
            $(this).addClass('spkToolbar');

            var obj = $(this);              

            //Get all LI in the UL
            var items = $("ul li", obj);
            items.draggable({ appendTo: "body",helper: 'clone' });
            if(o.droppableDiv!=undefined){
                $(o.droppableDiv).droppable({
                    drop: function( event, ui ) {
                        // some extra code for proper widget creation
                    }
                });
            }
        });
    }
});
})(jQuery);

HTML

<div id="toolbar">
    <ul>
        <li id="save" title="Guardar cambios"><img src="<c:url value="images/toolbar/save.png" />" /></li>
    </ul>
</div>

использование:

 jQuery('#toolbar').spkToolbar({droppableDiv:'#new-dropcontainer'});

почти я забыл, я использую jquery 1.5 и jquery ui 1.8.1

Заранее спасибо

Answer 1

Вот рабочая версия вашего кода: http://jsfiddle.net/marcosfromero/YRfVd/

Я добавил этот HTML:

<div id="new-dropcontainer">
    <ul>
    </ul>
</div>

с этим связанным JavaScript:

        if(o.droppableDiv!=undefined){
            $(o.droppableDiv).droppable({
                drop: function( event, ui ) {
                    // clone the original draggable, not the ui.helper
                    // and append it to the ul element inside new-dropcontainer
                    jQuery('#new-dropcontainer ul').append(ui.draggable.clone());
                    // some extra code for proper widget creation
                }
            });
        }

Answer 2

Я столкнулся с проблемой позиционирования элемента перетаскивания. Когда я пытаюсь перетащить элемент вместо добавления элемента, он всегда позиционируется сверху. Это дух, который я получил за это. Надеюсь, это полезно .

$(".zone1, .zone2").sortable({
            connectWith: ".test",
            cursor: 'pointer',
            over: function (event, ui) {
                        ui.placeholder.appendTo(ui.placeholder.parent());
                }
            }
        }).disableSelection();

Answer 3

На всякий случай я изменил версию jquery с 1.5 на 1.4.1, и это сработало.Я не знаю почему ..

Спасибо всем

Answer 4

Почему бы просто не частично скрыть нажатый значок, клонировать его и инициировать перетаскивание клонированного элемента?

Answer 5

Вы должны clone () перетаскиваемый объект.

или еще лучше, используйте опцию helper clone

$( ".selector" ).draggable({ helper: 'clone' });