当从一个div拖动到另一个使用jquery的滚动溢出时div消失

我有两个“DIV”，一个在左边，一个在右边。正确的有可拖动的元素，左侧有可拖放的容器。这两个DIV都有CSS属性overflow: auto，这在我的实现中非常重要，因为当DIV溢出时，我需要在每个div中出现滚动条。

当从一个div拖动到另一个使用jquery的滚动溢出时div消失

问题是，当我拖动右侧DIV中的元素并将其移动到左侧时，它会在DIV边缘后消失。

这是我正在尝试做的一个示例。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Practice</title> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 

 
    <script> 
 
    $(function() { 
 
     for (var i = 1; i <= 20; i++) { 
 
     $('#right').append($('<div></div>') 
 
      .addClass('item') 
 
      .html(i)); 
 

 
     } 
 
     $(".item").draggable({ 
 
     cursor: "move", 
 
     revert: "invalid" 
 
     }); 
 
     $("#bin").droppable({ 
 
     drop: function(event, ui) { 
 
      var mydiv = $(ui.draggable); 
 
      $("#bin").html("Dropped"); 
 
     } 
 
     }); 
 
    }); 
 
    </script> 
 

 
    <style> 
 
    #left { 
 
     border: 2px solid black; 
 
     position: fixed; 
 
     width: 49%; 
 
     height: 98%; 
 
     overflow: auto; 
 
    } 
 
    #right { 
 
     border: 2px solid black; 
 
     position: fixed; 
 
     left: 52%; 
 
     top: 2%; 
 
     width: 46%; 
 
     height: 98%; 
 
     overflow: auto; 
 
    } 
 
    #bin { 
 
     border: 2px solid black; 
 
     position: relative; 
 
     left: 12%; 
 
     top: 5%; 
 
     width: 75%; 
 
     height: 75%; 
 
    } 
 
    .item { 
 
     border: 2px solid black; 
 
     left: 12%; 
 
     top: 5%; 
 
     width: 15%; 
 
     height: 5%; 
 
    } 
 
    </style> 
 

 
</head> 
 

 
<body> 
 
    <div id="left"> 
 
    <div id="bin"> 
 

 
    </div> 
 
    </div> 
 

 
    <div id="right"> 
 

 

 

 

 
    </div> 
 

 
</body> 
 

 
</html>

来源

2016-03-25 Mohamad El-Hajj

像这样的事情不？ https://jsfiddle.net/8k21bsu8/ –

不完全是，当您将它拖到其父DIV（右DIV）的左侧时，它会消失在其他内容的后面。 –