Question

我一直在玩一些jquery来创建一个基本的拖放cms。 jquery和html如下。基本上我创建了3个不同的掉落区域。丢弃区域2和3位于放置区域1内。

除了一个bug之外，我有它工作。我可以将盒子拖放到放置区域2和3之下和之下，但是我不能将它们放在区域2和3之上。

要重新创建错误，请尝试将任何蓝色框拖放到放置区域1，放置区域2和3上方。它将始终位于区域2和3的下方。

代码：

        <html lang="en">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
#origin
{
  background-color: lightgreen;
}
#origin img, #drop img {
  margin-top: 3px;
  margin-left: 5px;
}
#cms-drop-1
{
  min-height: 120px;
  margin-top:30px;
  margin-bottom:30px;
  padding:10px;
  border: dotted 2px #ccc;
}
#cms-drop-3, #cms-drop-4
{
  min-height: 120px;
  margin-top:30px;
  margin-bottom:30px;
  padding:10px;
  border: dotted 2px #ccc;
  float:left;
  width:400px;
}
.draggable {
  border: dotted 1px #ccc;  
  width:400px;
  background-color:#39F;
}
.draggablenew {
  border: dotted 1px #ccc;  
  width:400px;
   background-color:#39F;
}
.expandDrop{
    margin-top:20px;
    margin-bottom:20px;
}
</style>
<script> 
    $(function() {
        $( ".draggablenew" ).draggable({
          connectToSortable: '.drop',
          helper: "clone",
          revert: "invalid"
        });
        $( ".draggable" ).draggable();
        $(".drop").droppable({ accept: ".draggable, .draggablenew", 
            drop: function(event, ui) {
                    $(this).removeClass("border").removeClass("over");
                    var dropped = ui.draggable;
                    var droppedOn = $(this);
                    $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn); 

                    if((dropped).hasClass('draggablenew')) {

                        $(dropped).removeClass('draggablenew').addClass('draggable'); 
                        $(dropped).draggable({
                          revert : function(event, ui) {

                            }
                        });

                    }

            }, 
            over: function(event, elem) {
                    $(this).addClass('expandDrop');
            },
            out: function(event, elem) {
                    $(this).removeClass('expandDrop');
            }
        }).sortable();

    });
</script>
</head>
<body>
<div id="wrapper">
    <div id="origin" class="fbox">
        <div title="one" class="draggablenew cms-calendar">Calendar</div>
        <div title="two" class="draggablenew cms-image" >Image</div>
        <div title="three" class="draggablenew cms-textbox" >Text</div>
    </div>

    <div id="cms-drop-1" class="drop fbox">
    <strong>Drop Zone 1:</strong>
        <div title="one" class="draggable cms-calendar" id="cms-element-1">Original 1</div>

        <div title="one" class="draggable cms-calendar" id="cms-element-2">Original 2</div>

        <div id="cms-drop-3" class="drop fbox">
        <strong>Drop Zone 2:</strong>
           <div title="one" class="draggable cms-calendar" id="cms-element-3">Original 3</div>
           <div title="one" class="draggable cms-calendar" id="cms-element-4">Original 4</div>
        </div>

        <div id="cms-drop-4" class="drop fbox">
        <strong>Drop Zone 3:</strong>
           <div title="one" class="draggable cms-calendar" id="cms-element-5">Original 5</div>
           <div title="one" class="draggable cms-calendar" id="cms-element-6">Original 6</div>
        </div>

        <div style="clear:both;"></div>
   </div>
</div>
</body>
</html>

jquery draggable sortable不会丢失在正确的位置

0 个答案: