jQuery 中克隆元素的问题
Problems with cloned element in jQuery
我的 jQuery 代码有一些问题。问题是,我的代码中克隆的元素无法调整大小。我试图从该网站的其他答案中获取一些指南,但似乎没有用。
$( function() {
$( "#sortable" ).sortable({
revert: true,
handle: '.sorthandle'
});
$( "#draggable" ).draggable({
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid",
handle: '.draghandle'
});
$( "ul, li" ).disableSelection();
$('.ui-state-default').resizable();
$(".uhoh").resizable();
} );
body {
font-family: Arial, Helvetica, sans-serif;
}
table {
font-size: 1em;
}
.ui-draggable, .ui-droppable {
background-position: top;
}
ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
li { margin: 5px; padding: 5px; width: 150px; }
.draghandle { width: 20px; height:20px; background:red; color:white;}
.sorthandle {width:20px; height:20px; background:green; color:white;}
<link href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<table>
<tr>
<td>
<ul>
<li id="draggable" class="ui-state-highlight uhoh">Drag me down <span class="draghandle"> D </span> <span class="sorthandle"> S </span>
</li>
</ul>
</td>
<td>
<ul id="sortable">
<li class="ui-state-default">Item 1 <span class="sorthandle"> S </span></li>
<li class="ui-state-default">Item 2 <span class="sorthandle"> S </span></li>
<li class="ui-state-default">Item 3 <span class="sorthandle"> S </span></li>
<li class="ui-state-default">Item 4 <span class="sorthandle"> S </span></li>
<li class="ui-state-default">Item 5 <span class="sorthandle"> S </span></li>
</ul>
</td>
</tr>
</table>
<span class="draghandle"> D </span>
<span class="sorthandle"> S </span>
问题的发生是因为克隆的助手(可拖动的)不会保留可调整大小的实例。因此,您需要创建一个新实例:
$("#draggable").draggable({
connectToSortable: "#sortable",
helper: function() {
//Return a new resizable clone
return $(this).clone().find(".ui-resizable-handle").remove().end().resizable();
},
revert: "invalid",
handle: '.draghandle'
});
演示:
$(function() {
$("#sortable").sortable({
revert: true,
handle: '.sorthandle'
});
$("#draggable").draggable({
connectToSortable: "#sortable",
helper: function() {
return $(this).clone().find(".ui-resizable-handle").remove().end().resizable();
},
revert: "invalid",
handle: '.draghandle'
});
$("ul, li").disableSelection();
$('.ui-state-default').resizable();
$(".uhoh").resizable();
});
body {
font-family: Arial, Helvetica, sans-serif;
}
table {
font-size: 1em;
}
.ui-draggable,
.ui-droppable {
background-position: top;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 10px;
}
li {
margin: 5px;
padding: 5px;
width: 150px;
}
.draghandle {
width: 20px;
height: 20px;
background: red;
color: white;
}
.sorthandle {
width: 20px;
height: 20px;
background: green;
color: white;
}
<link href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<table>
<tr>
<td>
<ul>
<li id="draggable" class="ui-state-highlight uhoh">Drag me down <span class="draghandle"> D </span> <span class="sorthandle"> S </span>
</li>
</ul>
</td>
<td>
<ul id="sortable">
<li class="ui-state-default">Item 1 <span class="sorthandle"> S </span>
</li>
<li class="ui-state-default">Item 2 <span class="sorthandle"> S </span>
</li>
<li class="ui-state-default">Item 3 <span class="sorthandle"> S </span>
</li>
<li class="ui-state-default">Item 4 <span class="sorthandle"> S </span>
</li>
<li class="ui-state-default">Item 5 <span class="sorthandle"> S </span>
</li>
</ul>
</td>
</tr>
</table>
<span class="draghandle"> D </span>
<span class="sorthandle"> S </span>
我的 jQuery 代码有一些问题。问题是,我的代码中克隆的元素无法调整大小。我试图从该网站的其他答案中获取一些指南,但似乎没有用。
$( function() {
$( "#sortable" ).sortable({
revert: true,
handle: '.sorthandle'
});
$( "#draggable" ).draggable({
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid",
handle: '.draghandle'
});
$( "ul, li" ).disableSelection();
$('.ui-state-default').resizable();
$(".uhoh").resizable();
} );
body {
font-family: Arial, Helvetica, sans-serif;
}
table {
font-size: 1em;
}
.ui-draggable, .ui-droppable {
background-position: top;
}
ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
li { margin: 5px; padding: 5px; width: 150px; }
.draghandle { width: 20px; height:20px; background:red; color:white;}
.sorthandle {width:20px; height:20px; background:green; color:white;}
<link href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<table>
<tr>
<td>
<ul>
<li id="draggable" class="ui-state-highlight uhoh">Drag me down <span class="draghandle"> D </span> <span class="sorthandle"> S </span>
</li>
</ul>
</td>
<td>
<ul id="sortable">
<li class="ui-state-default">Item 1 <span class="sorthandle"> S </span></li>
<li class="ui-state-default">Item 2 <span class="sorthandle"> S </span></li>
<li class="ui-state-default">Item 3 <span class="sorthandle"> S </span></li>
<li class="ui-state-default">Item 4 <span class="sorthandle"> S </span></li>
<li class="ui-state-default">Item 5 <span class="sorthandle"> S </span></li>
</ul>
</td>
</tr>
</table>
<span class="draghandle"> D </span>
<span class="sorthandle"> S </span>
问题的发生是因为克隆的助手(可拖动的)不会保留可调整大小的实例。因此,您需要创建一个新实例:
$("#draggable").draggable({
connectToSortable: "#sortable",
helper: function() {
//Return a new resizable clone
return $(this).clone().find(".ui-resizable-handle").remove().end().resizable();
},
revert: "invalid",
handle: '.draghandle'
});
演示:
$(function() {
$("#sortable").sortable({
revert: true,
handle: '.sorthandle'
});
$("#draggable").draggable({
connectToSortable: "#sortable",
helper: function() {
return $(this).clone().find(".ui-resizable-handle").remove().end().resizable();
},
revert: "invalid",
handle: '.draghandle'
});
$("ul, li").disableSelection();
$('.ui-state-default').resizable();
$(".uhoh").resizable();
});
body {
font-family: Arial, Helvetica, sans-serif;
}
table {
font-size: 1em;
}
.ui-draggable,
.ui-droppable {
background-position: top;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 10px;
}
li {
margin: 5px;
padding: 5px;
width: 150px;
}
.draghandle {
width: 20px;
height: 20px;
background: red;
color: white;
}
.sorthandle {
width: 20px;
height: 20px;
background: green;
color: white;
}
<link href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<table>
<tr>
<td>
<ul>
<li id="draggable" class="ui-state-highlight uhoh">Drag me down <span class="draghandle"> D </span> <span class="sorthandle"> S </span>
</li>
</ul>
</td>
<td>
<ul id="sortable">
<li class="ui-state-default">Item 1 <span class="sorthandle"> S </span>
</li>
<li class="ui-state-default">Item 2 <span class="sorthandle"> S </span>
</li>
<li class="ui-state-default">Item 3 <span class="sorthandle"> S </span>
</li>
<li class="ui-state-default">Item 4 <span class="sorthandle"> S </span>
</li>
<li class="ui-state-default">Item 5 <span class="sorthandle"> S </span>
</li>
</ul>
</td>
</tr>
</table>
<span class="draghandle"> D </span>
<span class="sorthandle"> S </span>