Question

我正在使用Jquery UI drag/drop效果，当我拖动元素时，我需要执行一段代码来检测元素是否为hovered。

更新：直播示例：here

这是我的拖码：

<script type="text/javascript">
   $(function(){
      $('.list-disc').sortable({
         connectWith: '.list-disc',

         drag: function(event, ui){
            $(".prof-name").hover(function(event) {
               var $obj = event.target;
               if (!timeoutId) {
                  timeoutId = window.setTimeout(function() {
                  timeoutId = null;
                  $($obj).next().slideToggle();
                  }, 2000);
               }
            },
            function (event) {
            if (timeoutId) {
               window.clearTimeout(timeoutId);
               timeoutId = null;
            }
            else {
               $(event.target).next().slideToggle();
            }
         });
         },

        start: function (event, ui){
           //SomeCode
        },
        stop: function (event, ui){
          //SomeCode
        }
        })
</script>

文档说：

拖动（event，ui）
在拖动过程中移动鼠标时触发，紧接在当前移动发生之前。

也许我已经理解错了或代码有问题...
正如您所看到的，我可以在drag::内部执行代码时使$(document).ready(function(){}事件中的代码正常工作。但我需要在拖动元素时执行此操作，测试拖动的元素是否将该对象悬停2秒然后我将slideToggle()它。

还尝试编写一个简单的console.log()来验证是否会触发，但没有......

*更新：*试过罗恩的回答:(仍然无法正常工作 - 没有任何事情发生）

over: function(event, ui){
   var timeoutId;
   $(".prof-name").hover(function(event) {
      var $obj = event.target;
      if (!timeoutId) {
         timeoutId = window.setTimeout(function() {
            timeoutId = null;
            $(this).next().slideToggle();
         }, 2000);
      }
   },
   function (event) {
   if (timeoutId) {
      window.clearTimeout(timeoutId);
      timeoutId = null;
   }
   else {
      $(event.target).next().slideToggle();
   }
   });
}

Answer 1

试试这个：

$( ".list-disc").sortable({
  over: function( event, ui ) { // $(this) will be the current hovered element }
});

在jquery拖动事件中检测悬停

1 个答案: