vania Drach vania Drach - 4 months ago 31
jQuery Question

jQuery UI Drag & Drop element jump

got little problem, trying use jQuery UI Drag & Drop, when i drop draggable element, it going far far away, in right bottom corner, even not i window...

codepen

$(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);
}
});
}());
});


If someone help, be very grateful. –°an't understand what i'm doing wrong

Answer

Add:

position: fixed;

to your newElem class.

Snippet:

$(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>

Comments