我正在尝试制作一个表单构建工具。一切正常。我能够将我的第一个图标拖放到主窗体主体上，就好了。当我这样做时，它会附加一个新的类面板 div。我也使面板可放置，但是当我尝试在其上放置某些东西时，什么也没有发生。如果我对其中的 div 进行硬编码，它可以正常工作，但是当我附加 div 时，它不会。我在解决这个问题时遇到了很多麻烦。
这是我的代码:
<html>
<head>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"></script>
<style type="text/css">
#toolbox
{
width: 100%;
height: 200px;
position: fixed;
top: 0;
left: 0;
background-color: #666666;
z-index: 2;
}
.icon
{
padding-top: 20px;
padding-left: 20px;
text-align: center;
display: table-cell;
}
#formbuilder
{
width: 100%;
position: absolute;
top: 200px;
left: 0px;
bottom: 0px;
padding-top: 5%;
background-color: orange;
opacity: 0.4;
overflow: visible;
}
.panel
{
margin: 0 auto;
margin-bottom: 20px;
height: 150px;
width: 150px;
background-color: blue;
opacity: 0.4;
}
</style>
</head>
<body>
<script type="text/javascript">
function formDropHandler(event, ui)
{
if(ui.draggable.hasClass("pan"))
{
var form = $("#formbuilder");
form.append('<div class="panel ui-droppable"></div>');
$(".panel").droppable({
drop: panelDropHandler
});
}
}
function panelDropHandler(event, ui)
{
if(ui.draggable.hasClass("tab")) alert("TRUE");
}
$(document).ready(function() {
var icons = $('.icon');
$('.icon').draggable({
cursor: 'move',
helper: 'clone',
revert: true
});
$("#formbuilder").droppable({
drop: formDropHandler
});
$(".panel").live('mouseover',function(){
$(".panel").droppable({
drop: panelDropHandler
});
});
});
</script>
<div id="toolbox">
<div class="icon pan">Panel<br /><img src="panel.png" alt="PANEL.PNG" /></div>
<div class="icon tab">Table<br /><img src="table.png" alt="TABLE.PNG" /></div>
</div>
<div id="formbuilder">
<div class="panel"></div>
<div class="panel"></div>
</div>
</body>
</html>
最佳答案
试试这个。两滴现在都在工作。面板落在表单生成器上，表格落在面板上(甚至是新创建的面板)。请记住，表单生成器只是工具栏部分下方的彩色区域。所以你越往下走，你将无法放下任何东西，除非你向上滚动。但这只是 CSS 的一个简单问题，将 position:absolute 更改为 position:relative 它应该会随着面板一起增长。
function formDropHandler(event, ui) {
if (ui.draggable.hasClass("pan")) {
var form = $("#formbuilder");
form.append('<div class="panel ui-droppable"></div>');
} else if (ui.draggable.hasClass("tab")){
alert("TRUE");
}
}
$(document).ready(function() {
var icons = $('.icon');
$('.icon').draggable({
cursor: 'move',
helper: 'clone',
revert: true
});
$("#formbuilder").live('mouseover', function() {
$("#formbuilder").droppable({
drop: formDropHandler
});
});
$(".panel").live('mouseover', function() {
$(".panel").droppable({
drop: formDropHandler
});
});
});
关于javascript - jQuery UI 可删除不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8497995/