我正在开发一个项目，该项目现在包含一个包含可拖动 div 的可打开菜单。我已经设置了一个带有 droppable 的网格，因此当我从菜单中拖动 div 并将其放在网格上的一个 div 上时，我将它放在上面的 div 会克隆它。
您可以将其想象为抓取桌面上的一个图标，然后将其放到另一个位置。
我遇到的问题是，当我第一次删除 div 时，它看起来很正常，如下所示：http: //i.imgur.com/nnSGFaF.png
但是当我抓住被丢弃的 div 并将其拖到另一个盒子时，会发生一些非常奇怪的事情，就像这样（我在该列中不断地从上到下抓住并丢弃 div）：http://i.imgur .com/Ddz76Dy.png
原谅我，我尝试设置一个 jsfiddle，但它并不完全有效。当您单击左侧的栏时，带有可拖动 div 的菜单不会打开。请随时尝试使其工作！jsfiddle.net/MarcosPortugal/KWJzS/
这是html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Robin Blom</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- styles -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/mycss.css" />
<!-- calling scripts - bootstrap&jquery -->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<![endif]-->
</head>
<!--
BODY
-->
<body>
<div class="grid-container">
</div>
<!-- Script in the end for faster page loading -->
<script src="js/startpage.js"></script>
<script>
renderGrid();
renderBoxMenu();
renderTestIcon();
</script>
</body>
</html>
和javascript代码（最后一部分，在“网站的jQuery”评论之后，对于这个问题最重要）：
/* Javascript file */
//Function that renders the grid used to place the icons
function renderGrid(){
/*
VARS USED FOR BOX SIZES (in pixels)
*/
var box_width = 100;
var box_height = 100;
var box_margin = 10; // The space between boxes
var box_background_color = 'rgba(150, 150, 150, 0.5)';
var user_width = $(window).width();
var user_height = $(window).height();
/*
Calculating the number of columns/rows to be drawn based on the dimensions of the user's viewport
*/
// Number of boxes horizontally counted
var box_horizontal_number = Math.floor( (user_width - box_margin) / (box_width + box_margin) );
//Number of boxes vertically counted
var box_vertical_number = Math.floor( (user_height - box_margin) / (box_height + box_margin) );
/*
Drawing the grid-container on the browser
*/
var grid_container_string = '<div class="grid-container"></div>';
// Printing the grid-container
$( "body" ).append( box_string );
// Calculating the width and height of the container
var grid_width = ( box_horizontal_number * box_width ) + ( box_horizontal_number * box_margin );
var grid_height = ( box_vertical_number * box_height ) + ( box_vertical_number * box_margin );
//Adding css to the grid-container
$( ".grid-container ").css({
"position": 'absolute',
"width": grid_width,
"height": grid_height,
"top": '50%',
"left": '50%',
"margin-top": -( grid_height / 2 ),
"margin-left": -( grid_width / 2 ),
"z-index": '-2'
});
/*
Drawing the grid on the browser
*/
var box_string = '<div class="box"></div>';
// Printing the box div's
for(var i = 0; i < ( box_horizontal_number * box_vertical_number ); i++) {
$( ".grid-container" ).append( box_string );
};
// Adding the CSS to the box div's
$( ".box ").css({
"display": 'inline-block',
"width": box_width,
"height": box_height,
"background-color": box_background_color,
"border-radius": '5px',
"margin": ( box_margin / 2 ) + 'px ' + ( box_margin / 2 ) + 'px ' + ( box_margin / 2 ) + 'px ' + ( box_margin / 2 ) + 'px',
"z-index": '-1'
});
}; // End of renderGrid();
// Function that renders the menu from where the icons are chosen
function renderBoxMenu(){
/*
VARS USED FOR THE BOX-MENU
*/
var box_menu_width = 300;
var box_menu_height = 500;
var box_menu_color = "rgba(150, 150, 150, 0.7)";
var box_menu_handle_width = 20;
var box_menu_handle_color = "rgba(255, 255, 255, 0.7)";
/* Drawing the box-menu */
var box_menu_string = '<div class="box-menu"> <div class="box-menu-handle"></div> </div>';
$( "body" ).append( box_menu_string );
/* Adding the CSS to the box_menu and box_menu_handle */
$( ".box-menu ").css({
"position": 'absolute',
"width": box_menu_width,
"height": box_menu_height,
"left": -(box_menu_width - box_menu_handle_width),
"top": '50%',
"margin-top": -( box_menu_height / 2 ),
"background-color": box_menu_color,
"overflow": 'hidden'
});
$( ".box-menu-handle ").css({
"position": 'relative',
"height": box_menu_height,
"width": box_menu_handle_width,
"float":'right',
"background-color": box_menu_handle_color
});
};// End of renderBoxMenu();
// Function that renders a test icon on the icon menu
function renderTestIcon(){
test_icon_string = '<div class="test-icon"></div>'
$(".box-menu").append(test_icon_string);
$(".test-icon").css({
"width": '100px',
"height": '100px',
"border-radius": '5px',
"background-color": 'blue'
});
};
function setUnlockedMode(){};
function setLockedMode(){
//$(".grid-container").fadeOut();
};
/* jQuery for the website */
var box_menu_state = "hidden"; // box is hidden by default
$(document).ready(function(){
// jQuery for the box menu handle
$(".box-menu-handle").click(function(){
if( box_menu_state == "hidden" ){
$(".box-menu").animate( { left: 0 }, 500 );
box_menu_state = "visible";
setUnlockedMode();
}else{
$(".box-menu").animate( { left: -( $(".box-menu").width() - $(".box-menu-handle").width() ) }, 500 );
box_menu_state = "hidden";
setLockedMode();
}
});
//jQuery for the ... draggable stuff
$( ".test-icon" ).draggable({
containment: "body",
helper: function(){
$copy = $(this).clone();
return $copy;
},
appendTo: 'body',
scroll: false
});
$( ".box" ).droppable({
drop: function( event, ui ){
$(this).html( $(ui.draggable).clone() );
$(this).droppable('disable');
$( this ).draggable({
containment: "body",
helper: function(){
$copy = $(this).clone();
return $copy;
},
appendTo: 'body',
scroll: false
});
}
});
});
请帮助我，因为我已经尝试解决这个问题几个小时但找不到解决方案。如果有不清楚的地方，请问我，我会解释！太感谢了！