применить функцию JavaScript к перетаскиваемой копии - PullRequest
Новая
       20

применить функцию JavaScript к перетаскиваемой копии

2 голосов
/ 21 апреля 2011

Я хочу применить функцию с именем copie_contenue, которая изменяет идентификатор родительского элемента div для копии, которую я создал после перетаскивания оригинала, но мой сценарий изменяет оригинал, а не копию. Я также попытался вместо этого использовать ui.helper, но ничего не произошло

    $('#model_1').draggable({
    connectToSortable:'#global_div',
    addClasses: false,
    helper:'clone', 
    stop: function(e,ui) {
        $(this).replaceWith(copie_contenue("model_1"));
    }
    })

Ответы [ 2 ]

6 голосов
/ 21 апреля 2011

Чтобы изменить недавно вставленный элемент, вы должны использовать событие получения сортируемого. Однако на сегодняшний день в пользовательском интерфейсе jQuery (1.8.11) есть известная функция ограничения / отсутствия, так что вы не можете легко получить доступ к клонированному элементу из события receive. Существующий ui.item ссылается на оригинальный элемент, а не на копию.

В качестве обходного пути вы можете добавить специальный класс к исходному элементу, когда начинается перетаскивание, для которого вы можете искать элементы сортируемого объекта в событии receive (которое срабатывает после вставки клона в DOM). По окончании перетаскивания вы должны убедиться, что, что бы ни случилось, ни у каких элементов в вашем документе не должно быть установлен специальный класс. Это особенно важно, если вы копируете / клонируете, так как событие получения сортируемого объекта запускается ПЕРЕД событием остановки draggable (где мы удаляем специальный класс из нашего исходного draggable).

http://jsfiddle.net/3Gkrf/1/

HTML: 

<ul>
    <li id="test" class="dragme">Test</li>
</ul>
<ul class="sortme">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

CSS: 

.dragme { border:1px solid silver; width:50px; height:50px; }
.newitem { background-color:yellow; }

JavaScript: 

$(function(){
    $(".sortme").sortable({
        receive: function(){
            $(this).find(".newitem").each(function(){
                $(this).removeClass("newitem");

                // Do your stuff with $(this), which is the newly created cloned item
            });
        }
    });

    $(".dragme").draggable({
        connectToSortable: ".sortme",
        helper: "clone",
        start: function(){
            $(this).addClass("newitem");
        },
        stop: function(){
            $(this).removeClass("newitem");
        }
    });
});

Если вы просто хотите создать другой экземпляр вручную, когда перетаскивание останавливается, это возможно для события остановки перетаскиваемого объекта. Тем не менее, я не думаю, что есть надежный способ обнаружить, была ли она сброшена на сортируемую или где-то еще. 

stop: function(){
   var clone = $(this).clone().appendTo("#wherever");
   // do anything else with the clone variable here
}

Вы должны вручную клонировать свой объект, потому что, даже если вы настроите помощника для его клонирования, помощник будет уничтожен всякий раз, когда перетаскивание прекращается. Если он упал на сортируемую, вы можете получить два новых объекта, поскольку сортируемая автоматически клонируется при получении.

0 голосов
/ 22 апреля 2011

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

$(function() {

             $('.dragging').draggable
            ({
revert: 'invalid',
connectToSortable:'#global_div',
addClasses: false,
helper:'clone',
drag: function(event,ui)
{

    $('#global_div').sortable
    ({

               receive: function(event, ui)
    {
         $(this).find(".dragging").each(function(){


            // Do your stuff with $(this), which is the newly created cloned item
            }:
    }
    });
}

});

...