jQuery를 UI 드래그 앤 드롭 요소 점프

Question

내가 드래그 할 수있는 요소를 삭제할 때 작은 문제가, 시도 사용 jQuery를 UI 드래그 & 드롭은, 그것은 ... 오른쪽 하단 모서리에, 멀리 멀리도하지 난 창을 가고있어

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

누군가가 도움을 주시면 매우 감사드립니다. 내가 잘못

Answer 1

추가 뭘하는지 이해 Сan't : 당신의 newElem 클래스에

position: fixed; 

합니다.

발췌문 : 작동

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