jQuery UI拖放元素跳转

vanless 发表于 Dev

无车的

有一点问题，尝试使用jQuery UI拖放，当我拖放可拖动元素时，它会走得很远，在右下角，甚至不是我的窗口...

$(function() {
  var $gameBox = $(".gameBox"),
    $newElemWrapper = $(".newElemWrapper"),
    $trash = $(".trash"),
    $list = $(".sortElements"),
    $newElem = null,
    colors = ["red", "limeGreen", "crimson",  "white", "yellow"],

    randNum = function() {
      return Math.floor(Math.random() * colors.length);
    },

    $addElem = function() {
      $newElem = $("<li></li>")
        .addClass("newElem")
        .css("display", "none")
        .css("background-color", colors[randNum()])
        .appendTo($newElemWrapper)
        .fadeIn();

      return $newElem;
    },

    $moveElem = function($elem) {
      $elem.fadeOut(function() {
        $elem.appendTo($list).fadeIn();
      });
    };

  (function go() {

    $addElem().draggable({
      revert: "invalid",
      containment: $gameBox,
      stack: $trash
    });

    $trash.droppable({
      accept: $(".newElemWrapper > li"),
      drop: function(evt, ui) {
        $moveElem(ui.draggable);
        setTimeout(go, 500);
      }
    });
  }());
});

如果有人帮忙，不胜感激。С不明白我在做什么错

盖塔诺

添加：

position: fixed;

到您的newElem类。

片段：

$(function() {
  var $gameBox = $(".gameBox"),
      $newElemWrapper = $(".newElemWrapper"),
      $trash = $(".trash"),
      $list = $(".sortElements"),
      $newElem = null,
      colors = ["red", "limeGreen", "crimson",  "white", "yellow"],

      randNum = function() {
        return Math.floor(Math.random() * colors.length);
      },

      $addElem = function() {
        $newElem = $("<li></li>")
        .addClass("newElem")
        .css("display", "none")
        .css("background-color", colors[randNum()])
        .appendTo($newElemWrapper)
        .fadeIn();

        return $newElem;
      },

      $moveElem = function($elem) {
        $elem.fadeOut(function() {
          $elem.appendTo($list).fadeIn();
        });
      };

  (function go() {

    $addElem().draggable({
      revert: "invalid",
      containment: $gameBox,
      stack: $trash
    });

    $trash.droppable({
      accept: $(".newElemWrapper > li"),
      drop: function(evt, ui) {
        $moveElem(ui.draggable);
        setTimeout(go, 500);
      }
    });
  }());
});

.gameBox {
  width: 90%;
  height: 500px;
  background: cornflowerblue;
  border-radius: 5px;
  margin: 0 auto;
  position: relative;
}

.newElemWrapper {
  position: absolute;
  top: 50px;
  left: 50px;
  margin: 0;
  padding: 0;
}

.newElem {
  position: fixed;
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 5px;
}

.trash {
  width: 300px;
  height: 100px;
  background: lightcoral;
  border-radius: 5px;
  position: absolute;
  bottom: 50px;
  right: 50px;
}

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>


<div class="gameBox">
    <ul class="newElemWrapper"></ul>

    <div class="trash">
        <ul class="sortElements">
            <li class="newElem"></li>
            <li class="newElem"></li>
            <li class="newElem"></li>
        </ul>
    </div>
</div>