1

在网页上，我想显示一个带有文本的小 div，该 div 被截断并用省略号显示，当鼠标悬停时，它应该扩大到更大的尺寸，以便所有文本都可见。然后我希望能够使用 jqueryui 拖放将文本框移动到网格上。当它被拖动和放置时，我希望它再次成为小尺寸。

我试图这样做：

鼠标悬停功能：

$(function() {
  $( ".ui-widget-content" ).mouseover(function(){
    $(this).css("width", "200px");
    $(this).css("height", "200px");
  }).mouseout(function(){
    $(this).css("width", "100px");
    $(this).css("height", "40px");            
  })
})

可拖动功能：

    $(function() {
      $( ".ui-widget-content" ).draggable({ snap: "td.chart:not(:first-child)", snapMode: "inner", revert: "invalid", snapTolerance: 40, stack: ".ui-widget-content",
        drag: function( event, ui ) {
          $(this).css("width", "100px");
          $(this).css("height", "40px");
        }
      });
    });

可丢弃功能：

    $(function() {
      $( "td.chart:not(:first-child)" ).droppable({
        accept: ".ui-widget-content",
        drop: function( event, ui ) {
          $("#" + ui.draggable.attr("id") ).css("background-color","#D7F970");
        }
      });
    });

被拖放的 div：

Lorem Ipsum

我想通过上面的方法，当有人去拖动div时，首先会触发鼠标悬停，放大div，然后dragstart会缩小它，就可以了。但是，我将它放在一个表上（请参阅 droppable 函数中的选择器“td.chart:not(:first-child)”），虽然它适用于表的前三行，但 div 不再捕捉并获取落在第四排和第五排。如果我删除鼠标悬停功能，则不会出现此问题。任何人都明白这里发生了什么？

4

1 回答 1

1

看看你的html可能会有所帮助。

这只是一种预感，但也许这只是您的可拖动项目的大小太大并且超过一个可放置项目的问题。我建议尝试更改可放置元素的容差，看看是否有帮助：

$( ".selector" ).droppable({ tolerance: "pointer" });

jQuery 文档状态：

Tolerance 指定用于测试可拖动对象是否“超过”可放置对象的模式。可能的值：

  • fit：draggable 与 droppable 完全重叠
  • intersect: draggable 与 droppable 重叠至少 50%
  • 指针：鼠标指针与可放置对象重叠
  • 触摸：可拖动与可放置任意数量重叠
于 2012-08-13T15:23:59.647 回答