【发布时间】：2021-09-26 00:24:49
【问题描述】：
我在使用可拖动的 div 时遇到问题，我正在尝试构建一个用户界面，您可以在其中从调色板拖放到工作区中。
基本上我所做的是我有一个隐藏的 div，其中包含每个调色板项目所代表的元素，当我单击调色板项目时，我克隆相应的隐藏项目并将其附加到编辑器 div（因此可以移动all arround），然后触发鼠标事件（因此您不必再次单击即可移动它）。
之后，克隆的项目（已存储在全局变量中）在放置时从文档中删除，如果元素被放置在工作区上，那么我将元素附加到工作区（因此只能在工作区），但在您将新元素放入工作区之前不会移动。
这是我的代码：。
CSS：
<style>
#editor{
position: relative;
height: 100%;
width: 100%;
background: lightcyan;
}
#elements{
display: none;
}
#palette{
height: 100%;
width: 125px;
float: left;
background: lightgrey;
}
.editor-pane{
height: 10%;
width: 20%;
float: left;
background: lightyellow;
position: absolute;
}
.editor-palette-item{
width: 16px;
height: 16px;
}
.palette-item-container{
cursor: pointer;
cursor: hand;
padding: 16px;
}
#workspace{
height: 100%;
width: 70%;
float: left;
background: white;
}
body{
width: 97%;
height: 750px;
}
</style>
html:
<div id="editor" style="border: solid; ">
<div id="palette">
<div class="palette-item-container" elementId="element1">
<div class="ui-icon ui-icon-alert"></div>
Element1
</div>
<div class="palette-item-container" elementId="element2">
<div class="ui-icon ui-icon-alert"></div>
Element2
</div>
<div class="palette-item-container" elementId="element3">
<div class="ui-icon ui-icon-alert"></div>
Element3
</div>
</div>
<div id="workspace">
</div>
<div id="elements">
<div id="element1" class="editor-pane"></div>
<div id="element2" class="editor-pane"></div>
<div id="element3" class="editor-pane"></div>
</div>
</div>
脚本
<script>
var ElementCopy = null;
$('#palette .palette-item-container').mousedown(function(evt) {
ElementCopy = $('#' + $(this).attr("elementId")).clone().removeAttr('id');
$('#editor').append(ElementCopy);
ElementCopy.draggable({
containment: "parent"
});
ElementCopy.css("left", evt.clientX - 20 + "px");
ElementCopy.css("top", evt.clientY - 20 + "px");
ElementCopy.trigger(evt);
// console.log(evt);
ElementCopy.mouseup(function(e){
ElementCopy.draggable( "destroy" );
ElementCopy.remove();
});
});
$('#workspace').droppable({
drop: function(evt) {
if (ElementCopy){
$('#workspace').append(ElementCopy);
$('#workspace .editor-pane').resizable({
containment: "parent"
})
.draggable({
containment: "parent"
});
// $('#workspace .editor-pane').addClass('ui-draggable-handle');
}
}
});
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<title>Document</title>
<style>
#editor{
position: relative;
height: 100%;
width: 100%;
background: lightcyan;
}
#elements{
display: none;
}
#palette{
height: 100%;
width: 125px;
float: left;
background: lightgrey;
}
.editor-pane{
height: 10%;
width: 20%;
float: left;
background: lightyellow;
position: absolute;
}
.editor-palette-item{
width: 16px;
height: 16px;
}
.palette-item-container{
cursor: pointer;
cursor: hand;
padding: 16px;
}
#workspace{
height: 100%;
width: 70%;
float: left;
background: white;
}
body{
width: 97%;
height: 750px;
}
</style>
</head>
<body>
<div id="editor" style="border: solid; ">
<div id="palette">
<div class="palette-item-container" elementId="element1">
<div class="ui-icon ui-icon-alert"></div>
Element1
</div>
<div class="palette-item-container" elementId="element2">
<div class="ui-icon ui-icon-alert"></div>
Element2
</div>
<div class="palette-item-container" elementId="element3">
<div class="ui-icon ui-icon-alert"></div>
Element3
</div>
</div>
<div id="workspace">
<!-- <div id="element2" class="editor-pane"></div> -->
</div>
<div id="elements">
<div id="element1" class="editor-pane">element1 data</div>
<div id="element2" class="editor-pane">element2 data</div>
<div id="element3" class="editor-pane">element3 data</div>
</div>
</div>
<script>
var ElementCopy = null;
/* $("#element2").resizable({
containment: "parent"
}).draggable({
containment: "parent"
}); */
$('#palette .palette-item-container').mousedown(function(evt) {
// console.log($(this).attr("elementId"));
ElementCopy = $('#' + $(this).attr("elementId")).clone().removeAttr('id');
$('#editor').append(ElementCopy);
ElementCopy.draggable({
containment: "parent"
});
ElementCopy.css("left", evt.clientX - 20 + "px");
ElementCopy.css("top", evt.clientY - 20 + "px");
ElementCopy.trigger(evt);
// console.log(evt);
ElementCopy.mouseup(function(e){
ElementCopy.draggable( "destroy" );
ElementCopy.remove();
});
});
$('#workspace').droppable({
drop: function(evt) {
if (ElementCopy){
$('#workspace').append(ElementCopy);
$('#workspace .editor-pane').resizable({
containment: "parent"
})
.draggable({
containment: "parent"
});
// $('#workspace .editor-pane').addClass('ui-draggable-handle');
}
}
});
</script>
</body>
</html>【问题讨论】：
-
欢迎来到 Stack Overflow。我怀疑问题出在 mousedown 事件的逻辑范围内。我认为这是在以一种无法初始化可拖动和捕获事件的方式冒泡。因此，直到第二个 mousedown 事件才初始化可拖动对象。您是否有理由不只是将这些元素初始化为可拖动？
-
我需要能够构建一个可自定义的工作区，然后将其保存为模板以在不同的页面中可视化，所以这就像某种页面构建器，所以，如示例，我需要能够拖动元素，或者甚至不存在。
标签： javascript html jquery css jquery-ui