Question

我从droppable div的组中删除div之外的一些元素。在div中删除div后，我将div中的div拖入div组中并将其放在div组中的某个位置。

元素在div组内成功删除。当我将div中的元素拖放到div组中时，我的问题就出现了。每当我拖放元素时，它都会被复制到另一个随机div中。

HTML代码：

<body style="width: 100%; float: left;">
<div style="width:100%;" id="gridDiv">
    <div style="display: inline-block; vertical-align: top; float: left;border:1px solid black;width:25%" >
        <ul style="list-style: none;" id="container">
            <li><img src="images/dedicated_server.png" id="img1" style="width:60px; height:60px" /></li>
            <li><img src="images/database.png" id="img2" style="width:60px; height:60px" /></li>
        </ul>
    </div>
    <div style="display: inline-block; vertical-align: top; width:70%; position: relative;float: right;border:1px solid black;" id="gridView">

    </div>
</div>
</body>

JQuery代码：

function createGrid() {
    var he = $('#gridView').height(),
        wi = $('#gridView').width();
    var x= 1;
    for (i=0; i< 12; i++) {
           for (var j=0; j < 12; j++) {
                var $newdiv = $('<div/>', {
                    "class": "grid",
                    text: '',
                    id: i + '##' + j,
                    x: i,
                    y: j
                });
                $('#gridView').append($newdiv);
           }
    } 
}

function handleDragStop( event, ui ) {
  var offsetXPos = parseInt( ui.offset.left );
  var offsetYPos = parseInt( ui.offset.top );
  console.log( "Drag stopped!\n\nOffset: (" + offsetXPos + ", " + offsetYPos + ")\n");
}
$( document ).ready(function() {
    console.log( "ready!" );
    createGrid();
    var original = true;
    var drop = false;
    applyDraggableOnList();    
    applyDroppableOnGrid(); 

});

var original = true;
var droppable = false;

function applyDraggableOnList(){
    $("#container > li > img").draggable({
        cursor: 'move',
        helper: "clone",
        containment: '#gridView',
        revert: "invalid",
        stop: function( event, ui ) {
            original = false;
        },
        start: function( event, ui ) {
            original = true;   
            applyDraggableOnGrid();
        }
    });
}

function applyDraggableOnGrid(){    
    $("#gridView").find('.draggableSpecific').draggable({
        cursor: 'move',
        helper: "original",
        containment: '#gridView',
        revert: "true",
        stop: function( event, ui ) {
            original = false;
        },
        start: function( event, ui ) {
            original = true;   
        }
    });
}

function applyDroppableOnGrid(){
    $("#gridView > div").droppable({
        activeClass: 'test',
        tolerance: 'fit',
        accept: function (elm) {
            var childLength = $(this).children().length;
            if(childLength == 0)
                return true;
            else
                return false;
        },
       drop: function( event, ui) {

        var draggableId = ui.draggable.attr("src");
        var droppableId = $(this).attr("id");
       // ui.draggable.droppable('destroy');
        var currentObject = ui.draggable.clone();

        $(this).append(currentObject.removeClass('ui-draggable ui-draggable-handle').addClass('draggableSpecific'));

        deleteImage(ui.draggable);
        applyDraggableOnGrid();

      }
    });  
}

function deleteImage( $item ) {   
       console.log("Called deleteImage");
    }

为我的代码提示： Fiddle for code

它的观点如下：

元素在drag＆amp; amp;落入可放置区域

0 个答案: