Question

我已经尝试了好几天，但我无法让它发挥作用。我想得到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>

Answer 1

更新3 ：看起来没有一种方法可以确定droppable中包含哪个“可拖动”项。您必须有一个方法来记住放入容器的内容。 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/

Answer 2

试试这个您只需将拖动对象ID存储到＆＃34; dragId＆＃34;。

<!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>

jquery ui当我点击droppable项目时如何获取可拖动项目的id

2 个答案: