JQuery - Drag & Drop - идентификатор перетаскиваемого элемента - PullRequest
Новая
       7

JQuery - Drag & Drop - идентификатор перетаскиваемого элемента

0 голосов
/ 18 февраля 2011

Я новичок в этом форуме

Я выучил jquery за 2 недели, и я довольно неопытен.Мой сайт построен с использованием asp.net mvc и использует jquery 1.4.1

это код

html

... 

<% foreach (var item in Model.Amici)
    {%> 
    <div id="amico_<%= item.Id %>" idAmico="<%= item.Id %>">
    <%= item.Name %>
    </div> 
    <% } %>

....

script 


    
    $(function() {
        $("div[id^='amico_']").draggable({ revert: "valid" });
        $("#droppable").droppable({
            activeClass: "ui-state-hover",
            hoverClass: "ui-state-active",
            drop: function(event, ui) {
                var index = $(".ui-draggable").attr('idAmico');
                $(this)
                   .addClass("ui-state-highlight")
                   .find("p")
                   .html("id = " + index);
            }
        });
    });

проблема в том, что значение атрибута id всегда равно 1 (переменная индекса), а 1 и 2. (красная строка), где я ошибаюсь?

большое спасибо за ваши ответы Альберто

Ответы [ 2 ]

2 голосов
/ 18 февраля 2011

Вот одна небольшая заметка, которая может помочь. 

<% foreach (var item in Model.Amici)
{%> 
<div id="amico_" idAmico="">
    <%= item.Name %>
</div> 
<% } %>

В этом примере, основываясь на вашем селекторе jQuery, я думаю, что вы ожидаете, что идентификатор каждого div будет «amico_1», «amico_2» и т. Д.… Возможно, на основе идентификатора элемента? В любом случае атрибут id должен быть уникальным. 

<% foreach (var item in Model.Amici)
{%> 
<div id="amico_<%= item.Id %>" idAmico="" class="drag">
    <%= item.Name %>
</div> 
<% } %>

Обратите внимание, что я добавил класс "перетаскивания" в div.

Это означает, что ваш селектор может быть обновлен с этого: 

$("div[id^='amico_']").draggable({ revert: "valid" });

К этому

$ (". Drag"). Draggable ({revert: "valid"});

И мое последнее предположение, что у вас есть небольшая ошибка в этой строке ... 

var index = $(".ui-draggable").attr('idAmico');

должно быть 

var index = $(ui.draggable).attr('idAmico');

Вы должны заметить, что есть параметр с именем ui, который передается в ваше событие сбрасывания. Содержит текущий перетаскиваемый элемент.

Надеюсь, это поможет.

0 голосов
/ 18 февраля 2011

Это потому, что в вашей функции перетаскивания вы произвольно вытягиваете $(".ui-draggable"), то есть любой класс на странице, который соответствует этому, а не дочерний объект удаляемого объекта.

Из документов, которые я нашел (http://jqueryui.com/demos/droppable/#event-drop), вы можете получить доступ к элементу, который был удален с помощью ui.draggable

...