我无法获得正确的可拖放对象 ID答案

【问题标题】：I am not able to get the correct draggale and droppable object Id我无法获得正确的可拖放对象 ID
【发布时间】：2014-07-16 19:19:16
【问题描述】：

我正在使用 jquery 可拖放功能。我的可拖放项目是相同的。问题是我无法获得正确的可拖放对象 ID。它给了我相同的 ID。

这里是代码

@using System.Activities.Statements
@using Assign.MvcTask.Models
@model UserConnectionsModel

<script type="text/javascript" src="@Url.Content("~/Scripts/MyContacts.js")"></script>
<script type="text/javascript">
    var draggableId = "";
    var dropableId = "";
    $(".ConBlocks").draggable({
        snap: true,
        stop: function (event, ui) {
           alert("draggable: " + ui.helper.data("type"));

        }
    }
        );
    $(".ConBlocks").droppable({
        accept: '.ConBlocks',
        tolerance: "intersect",
        addClasses: false,
        greedy: true,
        hoverClass: "drop-hover",
        drop: function (event, ui) {

        },
    });

    $(".ConBlocks").on("drop", function (event, ui) {
       alert("droppable: " + ui.helper.data("type"));

    });
</script>
<div id="ContactProfile" class="Contactblocks" style="display: none;">
    @if (Model.UserContactDetails.Any())
    {
        foreach (UserContactDetailsModel contact in Model.UserContactDetails)
        {
            var contactId = string.Concat("myContact", contact.ContactId);
        <div id='@contactId'  data-type='@contact.ContactId'  class="ConBlocks">
            <div class="CruunerName">@contact.Name</div>
            <div class="designation"></div>
            <div class="ContactAdd">
                @if (!string.IsNullOrWhiteSpace(contact.Email1))
                {
                    <p>Email @contact.Email1TypeDesc: @contact.Email1</p>
                }
                @if (!string.IsNullOrWhiteSpace(contact.Email2))
                {
                    <p>Email @contact.Email2TypeDesc: @contact.Email2</p>
                }
                @if (!string.IsNullOrWhiteSpace(contact.Phone1))
                {
                    <p>
                        Phone @contact.Phone1TypeDesc: @contact.Phone1
                    </p>
                }
                @if (!string.IsNullOrWhiteSpace(contact.Phone2))
                {
                    <p>
                        Phone @contact.Phone2TypeDesc: @contact.Phone2
                    </p>
                }
                @if (!string.IsNullOrWhiteSpace(contact.Phone3))
                {
                    <p>
                        Phone @contact.Phone3TypeDesc: @contact.Phone3
                    </p>
                }


            </div>
            <div class="connect">
                <ul data-type=@contact.ContactId>
                    <li><a data-type="assign" href="#">Assign a Task</a></li>
                    <li><a data-type="viewCard" href="#">View Card</a></li>
                    <li>@*<a data-type="edit" href="#">*@Edit@*</a>*@</li>
                </ul>
            </div>
        </div>
        }
    }
    else
    {
        <span style="font-weight: bold;">Currently, you have no contacts here. Click on 'Import Contacts' to build your contact list.</span>
    }


</div>

<div id="viewCardDialog" title="View Card">
    @* <p class="validateTips">All form fields are required.</p>

    <form>
        <fieldset>
            <label for="name">Name</label>
            <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all">
            <label for="email">Email</label>
            <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all">
            <label for="password">Password</label>
            <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all">
        </fieldset>
    </form>*@
</div>

请帮我解决这个问题。

【问题讨论】：

标签： jquery asp.net-mvc html jquery-ui

【解决方案1】：

您可以使用droppable 的drop 功能来获取 draggable 和 droppable 元素的 id：

drop: function( event, ui ) {
            //gives the current drop container id
            var dropId = $(this).attr("id");
            //gives the id of dropped element
            var dragId = ui.draggable.attr("id");
            alert(dropId);
            alert(dragId);
     }

这里是DEMO JSFIDDLE。

希望这对您的事业有所帮助。

【讨论】：