Question

我是这个论坛的新手

我从2周开始学习jquery，而且我相当缺乏经验。我的网站使用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> 
    <% } %>

...

脚本


    
    $(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（红色行）我哪里错了？

非常感谢您的回复阿尔贝托

Answer 1

这是一个可能有用的快速说明。

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

在这个示例中，基于您的jQuery选择器，我认为您要将每个div的id指定为“amico_1”，“amico_2”等等......也许基于项ID？无论如何，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的参数会传递到您的droppable事件中。这包含当前拖动的元素。

希望这有帮助。

Answer 2

这是因为在你的drop函数中，你是任意拉$(".ui-draggable")，它是页面上与之匹配的任何类，而不是被删除对象的子对象。

从我找到的文档（http://jqueryui.com/demos/droppable/#event-drop）中，您可以访问使用ui.draggable

删除的元素

JQuery - Drag＆amp; Drop - Id可拖动元素

2 个答案: