Question

在网页上，我想显示一个带有文本的小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");
        }
      });
    });

Droppable功能：

    $(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不再捕捉并获取落在第四和第五行。如果我删除鼠标悬停功能不会发生此问题。任何人都明白这里发生了什么？

Answer 1

查看你的HTML可能会有所帮助。

这只是一种预感，但也许它只是你的可拖动的大小太大而且超过一个可丢弃物品。我建议尝试更改droppable元素的容差以查看它是否有帮助：

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

jQuery文档说明：

Tolerance指定用于测试draggable是否在“dropable”上方的模式。可能的值：

fit：draggable完全覆盖了droppable
intersect：draggable与droppable重叠至少50％
指针：鼠标指针与可放置的
touch：draggable重叠任何数量的droppable

如何使用鼠标悬停使用jqueryui droppable

1 个答案: