Question

我正在使用jquery draggable和droppable功能。我的可拖动和可投放的物品是相同的。问题是我无法获得正确的可拖动和可放置对象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>

请帮我解决这个问题。

Answer 1

您可以使用drop的{{1}}功能来获取可拖动和可投放元素的ID：

droppable

这是DEMO JSFIDDLE。

希望这有助于你的事业。

我无法获得正确的可拖动和可放置对象Id

1 个答案:

这是DEMO JSFIDDLE。