获取被拖动元素的ID

Posted 2023-05-08

【中文标题】获取被拖动元素的ID

【英文标题】：Get ID of element being dragged

【发布时间】：2014-11-30 00:34:49

【问题描述】：

使用下面的代码，如何获取被拖动元素的 id？然后，如果元素ID不等于1，那么将元素恢复到原始位置？

谢谢，

<script> //DRAG AND DROP EVENTS
    $(".container").delegate(".draggable","mouseenter",function() 
        $(".draggable").draggable(      
            revert : function(event, ui) 
                $(this).data("uiDraggable").originalPosition = 
                    top  : 0,
                    left : 0
                ;
                return !event;
            ,
            start: function(event,ui)   // GET ID OF ELEMENT HERE IS NOT WORKING 
              var id = ui.draggable.attr("id");
              console.log(id);
              //GETTING ERROR Uncaught TypeError: Cannot read property 'attr' of undefined
              //IF id <> 1 then revert to original position 
            
        );

    );
    </script>

【参考方案1】：

在你传递给revert选项的函数中，this将引用对应于被拖动元素的jQuery对象——你可以使用this.attr("id")访问它的id。

旁注：

您已在事件处理程序中初始化可拖动对象 - 每次 事件被触发，draggable 将被重新初始化......你可能 想要将初始化移到外面。 revert 回调没有 event 或 ui 参数，它似乎接收的唯一参数是布尔值 start 回调中的 ui 参数没有可拖动属性 最好参考documentation 而不是做出假设

---

$(".draggable").draggable(
  revert: function (event, ui) 
     return (this.attr("id")==1);
  
);

div 
    width:50px;
    height:50px;
    line-height:50px;
    margin:5px;
    text-align:center;
    background:red;
    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<div id="1" class="draggable">1</div>
<div id="2" class="draggable">2</div>

【讨论】：

谢谢，但由于某种原因，这对我不起作用，我认为这是因为我已经在事件处理程序中初始化了可拖动对象，我这样做的原因是因为这是一个 ajax 日历，并且事件是可拖动的，当我拖动一次时，它不再让我拖动了。还有其他建议吗？

@DobotJr 你的问题是，“我怎样才能得到一个被拖动元素的 id？然后，如果元素 ID 不等于 1，那么将元素恢复到原始位置？” - 我相信这是答案。将初始化移动到其他不经常发生的地方。在第一次拖动期间，您可能会遇到错误。我又添加了一些东西 - 您正在使用许多不会退出的东西。完整的代码可能有更多这样的东西。打开控制台并检查错误...或者提出另一个问题，其中包含重现问题所需的完整代码，或演示...

我试过你的建议，但没有奏效。得到“无法读取未定义的属性”或类似的东西。

【参考方案2】：

试试这个：

start: function(event, ui) 
   var id = event.target.id;
   console.log(id);

【讨论】：

能否请您添加更多解释..？我们应该在哪里添加这段代码？在还原功能中..？开始回调..？