Jquery sortable + draggable 无法获得正确的事件目标 id
Jquery sortable + draggable not able to get correct event target id
我正在尝试构建一个表单生成器,它可以拖动 div 并一个接一个地放置,还可以在其中放置输入控件。
它可以对控件进行排序。 (参考下图:图片)首先,我拖了两个 Div 容器并将其放在主容器内。之后,当我尝试将 Div2
放在 Div1
中时,我无法获取事件目标 ID。
只有当主容器内有两个 div 时才会发生这种情况。当我从字段类型中将一个 div 拖放到另一个上时,我得到了正确的目标 ID。
要重新创建,请先将 Div 拖动到 mastercontainer(id)
,然后尝试将其拖动 childcontainer(id)
$('.containerHolder').sortable({
connectWith: '.containerHolder',
scroll: false,
revert: true,
zIndex: 10000,
helper: "clone",
placeholder: "control-placeholder",
stop: function (event, ui) {
alert(event.target.id);
}
});
$("#fieldTypes li").draggable({
connectToSortable: ".containerHolder",
helper: "clone",
revert: "invalid",
});
$(".containerHolder").disableSelection();
您错过了正确的事件,因为 stop()
,一旦您在容器之间拖动,就会显示拖动开始的目标,
因此您可以使用 recieve()
事件来捕捉最后一次更改发生的位置,如下所示:
receive: function(e, ui) {
alert(e.target.id)
}
请参阅以下代码段:
var MasterContainer = {
"title": "Untitled Form",
"description": "Description of the form goes here",
"controls": []
};
$('.container').sortable({
connectWith: '.container',
scroll: false,
zIndex: 10000,
placeholder: "control-placeholder",
receive: function(e, ui) {
alert(e.target.id)
}
});
$("#container1, #container2").draggable({
connectToSortable: ".container",
helper: "clone",
revert: "invalid",
});
$(".container").disableSelection();
.container {
min-height: 200px;
background-color: #4474FF;
border: 1px solid #1E44B2;
border-radius: 2px;
display: inline-block;
padding: 10px;
}
.container1 {
display: inline-block;
}
.container .container {
min-height: 100px;
background-color: #45FF41;
border: 1px solid #04B200;
display: block;
width: 200px;
margin-bottom: 5px;
}
.item {
background-color: #FFCB44;
border: 1px solid #B2840C;
margin-bottom: 5px;
border-radius: 2px;
padding: 15px 50px;
}
.item1 {
background-color: #FFCB44;
border: 1px solid #B2840C;
margin-bottom: 5px;
border-radius: 2px;
padding: 10px 30px;
width: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div class="container1">
<div id="container1" class="item1">Div</div>
<div id="container2" class="item1">List</div>
<div id="container3" class="item1">Button</div>
</div>
<div id="masterConatiner" class="container">
master container
<div class="item"></div>
<div id="childContainer" class="container">
ChildContainer
</div>
</div>
我正在尝试构建一个表单生成器,它可以拖动 div 并一个接一个地放置,还可以在其中放置输入控件。
它可以对控件进行排序。 (参考下图:图片)首先,我拖了两个 Div 容器并将其放在主容器内。之后,当我尝试将 Div2
放在 Div1
中时,我无法获取事件目标 ID。
只有当主容器内有两个 div 时才会发生这种情况。当我从字段类型中将一个 div 拖放到另一个上时,我得到了正确的目标 ID。
要重新创建,请先将 Div 拖动到 mastercontainer(id)
,然后尝试将其拖动 childcontainer(id)
$('.containerHolder').sortable({
connectWith: '.containerHolder',
scroll: false,
revert: true,
zIndex: 10000,
helper: "clone",
placeholder: "control-placeholder",
stop: function (event, ui) {
alert(event.target.id);
}
});
$("#fieldTypes li").draggable({
connectToSortable: ".containerHolder",
helper: "clone",
revert: "invalid",
});
$(".containerHolder").disableSelection();
您错过了正确的事件,因为 stop()
,一旦您在容器之间拖动,就会显示拖动开始的目标,
因此您可以使用 recieve()
事件来捕捉最后一次更改发生的位置,如下所示:
receive: function(e, ui) {
alert(e.target.id)
}
请参阅以下代码段:
var MasterContainer = {
"title": "Untitled Form",
"description": "Description of the form goes here",
"controls": []
};
$('.container').sortable({
connectWith: '.container',
scroll: false,
zIndex: 10000,
placeholder: "control-placeholder",
receive: function(e, ui) {
alert(e.target.id)
}
});
$("#container1, #container2").draggable({
connectToSortable: ".container",
helper: "clone",
revert: "invalid",
});
$(".container").disableSelection();
.container {
min-height: 200px;
background-color: #4474FF;
border: 1px solid #1E44B2;
border-radius: 2px;
display: inline-block;
padding: 10px;
}
.container1 {
display: inline-block;
}
.container .container {
min-height: 100px;
background-color: #45FF41;
border: 1px solid #04B200;
display: block;
width: 200px;
margin-bottom: 5px;
}
.item {
background-color: #FFCB44;
border: 1px solid #B2840C;
margin-bottom: 5px;
border-radius: 2px;
padding: 15px 50px;
}
.item1 {
background-color: #FFCB44;
border: 1px solid #B2840C;
margin-bottom: 5px;
border-radius: 2px;
padding: 10px 30px;
width: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div class="container1">
<div id="container1" class="item1">Div</div>
<div id="container2" class="item1">List</div>
<div id="container3" class="item1">Button</div>
</div>
<div id="masterConatiner" class="container">
master container
<div class="item"></div>
<div id="childContainer" class="container">
ChildContainer
</div>
</div>