我在页面左侧有一个可滚动列表(overflow:auto),页面右侧有几个dropable.我找到了一个解决方法,允许使用克隆将元素从列表拖动到容器,但是当元素被删除时,它会获得position:absolute,并且顶部和右侧位置与z-index一起添加到内联样式原来那里.附加的所有其他类都在副本中,只是在拖放之后,该元素无法再次拖动？
有没有办法做到这一点或删除克隆过程添加的内联样式？
显示问题的简化代码如下所示 - 您应该能够剪切并粘贴到页面并放入您的webroot进行测试.提前致谢.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> </script>
<script>
$(document).ready(function() {
var dropped = false;
$(".container").droppable({
drop: function(event, ui) {
dropped = true;
$.ui.ddmanager.current.cancelHelperRemoval = true;
ui.helper.appendTo(this);
}
});
$(".item").draggable({
revert: 'invalid',
helper: function(){
$copy = $(this).clone();
return $copy;
},
start: function(event, ui) {
dropped = false;
$(this).addClass("hide");
},
stop: function(event, ui) {
if (dropped==true) {
$(this).remove();
} else {
$(this).removeClass("hide"); …