Question

我有两个＆＃34; DIV＆＃34; s，一个在左边，一个在右边。右边有可拖动的元素，左边有一个可放置的容器。两个DIV都有CSS属性overflow: auto，这在我的实现中是必不可少的，因为当DIV溢出时我需要在每个div中出现一个滚动。

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

这是我试图做的一个例子。

＆＃13;

<!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>

＆＃13;