1

这是我的代码 http://jsfiddle.net/cekX9/4/的小提琴

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

我让它工作除了一个错误。我可以将框拖放到 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>
4

0 回答 0