jquery ui如何在单击可拖放项目时获取可拖动项目的ID答案

【问题标题】：jquery ui How to get a id of a draggable item when i click on the droppable itemjquery ui如何在单击可拖放项目时获取可拖动项目的ID
【发布时间】：2014-05-13 23:12:16
【问题描述】：

我已经尝试了几天，但我无法让它工作。我想获取作为可拖动项目的 div (ui-widget-content) 的 id，当我拖放并单击作为拖放项目的 div (ui-widget-header) 但我无法让它工作。

      <script>

         $(document).ready(function () {
            $("#j1, #j2, #j3, #j4, #j5, #j6").draggable();
            $("#p1, #p2, #p3, #p4, #p5, #p6").droppable({
               hoverClass: 'ui-state-hover',
               helper: 'clone',
               cursor: 'move',
               drop: function (event, ui) {
                  $(this).addClass('ui-state-highlight');
                  $(ui.draggable).addClass('ui-state-highlight');
                  $(ui.draggable).draggable('enable');
                  console.log('Dragged: ' + alert(ui.draggable.attr("id")));
               }
            });
         });

         $('ui-widget-header').click(function () {
             var item_id = ui.item.attr('id');
         });
         alert('item_id');
         //$('.ui-droppable').click(function(){
         //    var myStringPosition = $('div'); // $(event.target).attr('id');
         //    $('.ui-droppable').each(function(){
         //      myStringPosition = $(this)[0].id; 
         //    });
         //    alert(myStringPosition);
         //});

      </script>
   </head>
   <body>

      <div id="j1" class="ui-widget-content" data-userid="1">Jogador 1</div>

      <div id="j2" class="ui-widget-content">Jogador 2</div>

      <div id="j3" class="ui-widget-content">Jogador 3</div>

      <div id="j4" class="ui-widget-content">Jogador 4</div>

      <div id="j5" class="ui-widget-content">Jogador 5</div>

      <div id="j6" class="ui-widget-content">Jogador 6</div>

      <div id="p1" class="ui-widget-header"><p>Posicao 1</p></div>

      <div id="p2" class="ui-widget-header"><p>Posicao 2</p></div>

      <div id="p3" class="ui-widget-header"><p>Posicao 3</p></div>

      <div id="p1" class="ui-widget-header"><p>Posicao 4</p></div>

      <div id="p2" class="ui-widget-header"><p>Posicao 5</p></div>

      <div id="p3" class="ui-widget-header"><p>Posicao 6</p></div>

    </body>
</html>

【问题讨论】：

请填空I want to see _____________ when I click on ________
我想查看点击容器时拖动的元素的id

标签： javascript jquery jquery-ui drag-and-drop

【解决方案1】：

更新 3：似乎没有一种方法可以确定可放置项中包含哪个“可拖动”项。您必须有一种方法来记住放入容器中的内容。 jquery 对象上的data() 函数是一个很好的方法。

在drop函数中：

var itemId = $(ui.draggable).attr("id");
$(this).data('dropped', itemId);

在点击回调中使用：

if ($(item).data('dropped'))
{
    alert($(item).data('dropped'));
}

注意：这只会记住最近丢弃的项目，一旦将其放入新容器中就不会删除它 - 这应该很容易实现。

更新 2：以下内容应提供带有可拖动项目 ID 的警报。我把条件放在那里，以确定它是否被移动到底部的容器中。

$('.ui-widget-content').click(function (event) {
    var item = event.target;

    if (item.offsetTop >= 140)
    {
        alert(item.id);
    }
});

新小提琴：http://jsfiddle.net/KLLCg/7/

更新：看起来你想要一些不同的东西。如果您只想要目标容器的 ID，您应该可以使用 event.target.id 获取它

drop: function (event, ui) {
    $(this).addClass('ui-state-highlight');
    $(ui.draggable).addClass('ui-state-highlight');
    $(ui.draggable).draggable('enable');

    var itemId = $(ui.draggable).attr("id");
    var destId = event.target.id ;
    var message = '"' + itemId + '" was dragged to "' + destId + '"';
    alert(message);
    console.log(message);
}

查看更新的小提琴：http://jsfiddle.net/KLLCg/6/

原始答案

首先 - 您应该将点击处理程序放在 document.ready 中。我认为您可能会遇到问题，因为事件目标对象将是单击的任何内容，并且 <p> 元素没有 ID。如果我理解您的问题，以下代码可能会起作用。

         $('.ui-widget-header').click(function (event) {
             var item = event.target;
             if (item.nodeName == 'P') {
                 item = item.parentNode;
             }
             alert(item.id);
         });

jsfiddle 示例：http://jsfiddle.net/KLLCg/3/

【讨论】：

感谢您的解决方案，但这并不能解决我的问题，我需要的是，当我单击容器时，它会为我提供被拖入的元素的 ID
所以当你将项目拖到容器中时，释放鼠标后，警报会显示你拖动的项目的id，而不是你释放到的项目？
当我将项目拖到容器中时，在我释放鼠标单击它后，显示的警报是正确的，之后我想在容器中单击并再次获取该项目的 ID被丢在那里
哦！好的，对此感到抱歉。我认为您需要在实际项目中添加一个 onclick，然后我会更新答案。
不，不是这样。在您的 jsfiddle 更新示例中，当您将 Jogador1 拖到容器 Posicao1 上时显示“j1 被拖到 p1”，之后我只想在容器中单击并获取相同的警报“j1 被拖到 p1”。再次感谢您的时间和耐心

【解决方案2】：

试试这个您只需将拖动对象 id 存储到“dragId”中。

<!DOCTYPE html>

<link href='../../css/style.css' rel='stylesheet' type='text/css'/>
<script type="text/javascript" src = "js/jquery.min.js"></script>
<script type="text/javascript" src = "js/jquery-ui.min.js"></script>
<script type="text/javascript" src = "js/jquery-ui.js"></script>

<head>

    <style>

        .dragAndDrop
        {

        }

        .dragBoxStyle
        {
            position:absolute;
            left:170px;
            top:100px;

        }

        .dropBoxStyle
        {
            position:absolute;
            left:170px;
            top:300px;
        }

        .dragImageStyle
        {

        }

        .dropImageStyle
        {

        }

    </style>

    <script>

        var dragId;

        $(function()
        {
            $(".dragImageStyle").draggable();

            $(".dragImageStyle").mousedown(function()
            {
                dragId = (this.id);
            });


            $( ".dropImageStyle" ).droppable(
            {
                drop: function( event, ui ) 
                {
                    alert("Droped on "+this.id+" : "+dragId);
                }
            });
        });

    </script>

</head>

<body>

    <div id = "dragAndDrop">

        <div id = "bg">
            <img src = "images/BG.jpg"></img>
        <div>

        <div id = "dropTiles" class = "dropBoxStyle">
            <img id = "drop1" class = "dropImageStyle" src = "images/Tab1_V.jpg"><img>
            <img id = "drop2" class = "dropImageStyle" src = "images/Tab2_V.jpg"><img>
            <img id = "drop3" class = "dropImageStyle" src = "images/Tab3_V.jpg"><img>
            <img id = "drop4" class = "dropImageStyle" src = "images/Tab4_V.jpg"><img>
        </div>  

        <div class = "dragBoxStyle">
            <img id = "dragBox1" src = "images/BlankBox.png"><img>
            <img id = "dragBox2" src = "images/BlankBox.png"><img>
            <img id = "dragBox3" src = "images/BlankBox.png"><img>
            <img id = "dragBox4" src = "images/BlankBox.png"><img>
        </div>

        <div id = "dragTiles" class = "dragBoxStyle">
            <img id = "drag1" class = "dragImageStyle" src = "images/Tab1_N.jpg"><img>
            <img id = "drag2" class = "dragImageStyle" src = "images/Tab2_N.jpg"><img>
            <img id = "drag3" class = "dragImageStyle" src = "images/Tab3_N.jpg"><img>
            <img id = "drag4" class = "dragImageStyle" src = "images/Tab4_N.jpg"><img>
        </div>          

    </div>
</body>

【讨论】：