文章/答案/技术大牛

发布

社区首页 >问答首页 >jquery ui在删除项时获取可删除元素的id

问jquery ui在删除项时获取可删除元素的id
EN

Stack Overflow用户

提问于 2011-04-06 15:30:07

回答 4查看 92.6K关注 0票数 44

当丢弃一个项目时，我们如何获得可丢弃元素的id？这里我使用jquery ui和asp.net mvc。

 <table id="droppable">
    <tr>
    <td style="width:300px;height:50px">Backlog</td>
    <td style="width:300px;height:50px">Ready</td>
    <td style="width:300px;height:50px">Working</td>
    <td style="width:300px;height:50px">Complete</td>
    <td style="width:300px;height:50px">Archive</td>
    </tr>
        <tr id="cart">
        <td id="BackLog" class="drag"  style="width:120px;height:50px;">

         <img class="draggable" id="1234" src="../../Content/themes/base/images/ui-icons_222222_256x240.png" />

        </td>
            <td id="Ready"  class="drag"  style="width:140px;height:50px">


            </td>
            <td id="Working" class="drag"  style="width:140px;height:50px">

            </td>
            <td id="Complete" class="drag" style="width:140px;height:50px">


            </td>
            <td id="Archive" class="drag" style="width:140px;height:50px">

            </td>
        </tr>
    }
   </table>

在这里，我想将第一列中的图像移动到其他列，并获取该列的id。对于拖放，我使用脚本

<script type="text/javascript">
    $(function () {
        $(".draggable").draggable({ containment: '#imageboundary', axis: "x" });
        $("#droppable").droppable({
            drop: function (event, ui) {                                      
                $.ajax({
                    type: "POST",
                    url: '/Project/AddToPhase/' + $(ui.draggable).attr("id") ,
                    success: function (data) {
                        $('.result').html(data);
                    }
                });
            }
        });
    });
</script>

jquery-ui

drag-and-drop

回答 4

Stack Overflow用户

发布于 2011-11-19 00:37:11

要同时获得draggable和droppable元素的id，请使用以下命令：

$('.selector').droppable({ drop: Drop });

function Drop(event, ui) {
  var draggableId = ui.draggable.attr("id");
  var droppableId = $(this).attr("id");
}

对不起，可能对你来说有点晚，但我刚刚开始使用jquery，需要确切的东西。

票数 101

Stack Overflow用户

发布于 2016-04-15 05:02:46

jQuery UI的droppable API manual提到了如何在section of greedy option中非常“秘密”地获得“dropped on-droppable”

可以检查

event.target以查看哪个droppable接收到了draggable元素

但请注意，event.target只包含一个DOM元素...

回答你的问题

您将能够通过第一个参数event在droppable的drop回调中获取ID。

纯JS

属性：event.target.id -如果未设置ID :空字符串"“

属性：event.target.getAttribute('id') -如果未设置ID : null

jQuery

属性：$(event.target).prop('id') -如果未设置ID :空字符串"“

属性：$(event.target).attr('id') -如果ID未设置:未定义

使用示例

<script>
$(function(){
    $(".droppablesSelector").droppable({
        drop: function (event, ui) {                                      
          //display the ID in the console log:
          console.log( event.target.id );
        }
    });
});
</script>

更多信息

jQuery的事件系统根据W3C标准对事件对象进行规范化。

保证将事件对象传递给事件处理程序(不需要检查window.event )。它规范化了目标、relatedTarget、which、metaKey和pageX/Y属性，并同时提供了stopPropagation()和preventDefault()方法。

票数 8

Stack Overflow用户

发布于 2011-04-06 15:38:15

您挂接了一个"drop"事件，并询问您刚刚删除的元素。该元素是以下函数中的参数"ui"

$( ".selector" ).droppable({
   drop: function(event, ui) { ... }
});

看一看documentation.

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/5562853

复制

相似问题

问jquery ui在删除项时获取可删除元素的id
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery ui在删除项时获取可删除元素的idEN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery ui在删除项时获取可删除元素的id
EN