问题：
如何将一个可拖动的拖放到一个可排序的，拖放的项目不是原始元素，而是一个自定义的助手
花飞尘
jQuery draggeble/sortable演示只显示如何删除可拖动的克隆（可拖动和可排序项具有相同的结构）。我想删除一个不同的DOM结构。例如，当我拖动一个简单的div时，拖动的元素会被转换成更复杂的DOM结构。请参阅jsfidler示例，注意帮助器是如何变化的，我想删除帮助器，但原始项被删除。
使用简单的可拖动项目和可拖放容器工作，但我希望能够将项目放在可排序容器的任何部分，并能够重新排序元素。
知道如何实现我想要的吗？
$(function() {
$(".portlet-container").sortable({
handle: ".portlet-header",
cursor: "move",
placeholder: "ui-state-highlight"
}).droppable({
accept: ".portlet-clone",
drop: function(event, ui) {
return $(ui.helper).clone(true, true)
.removeClass('ui-draggable-dragging')
.removeClass('portlet-clone')
.css("position", "")
.css("left", "")
.css("top", "").appendTo(this);
}
});
$('.portlet-name').draggable({
connectToSortable: ".portlet-container",
cursor: 'move',
revert: 'invalid',
opacity: 0.7,
helper: portletHelper
});
function portletHelper(event) {
var portletWrapperStr = "<div class='portlet-wrapper portlet-clone' style='height:" + $(this).data("div-height") + "px; width:" + $(this).data("div-width") + "px;'/>";
var portletStr = "<div class='portlet' " +
"style='height:" + ($(this).data("div-height") - 40 - 2) + "px;'>" +
"<div class='portlet-header'>" + $(this).html() + "</div>" +
"</div>";
var portlet = $(portletStr);
var portletWrapper = $(portletWrapperStr).append(portlet);
return portletWrapper;
}
});.portlet-container {
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
width: 960px;
}
.portlet-wrapper {
overflow: hidden;
}
.portlet {
border-radius: 4px;
border: 1px solid #bbb;
background-color: white;
padding: 10px 10px;
margin-top: 10px;
margin-bottom: 10px;
position: relative;
overflow: hidden;
}
.portlet-header {
height: 25px;
}
.portlet-content {
margin-bottom: 10px;
}
.portlet-options {
float: right;
}
.portlet-placeholder {
border: 1px dotted black;
margin: 0 1em 1em 0;
height: 95%;
}
.portlets-items {
width: 220px;
}
.portlet-item {
margin: 2px;
display: inline-block;
width: 220px;
height: 25px;
}
.portlet-name {
width: 140px;
font-family: Akkurat, Helvetica, Arial, sans-serif;
font-size: 12px;
color: #5c5e5f;
border-radius: 2px;
border: 1px solid #bbb;
padding: 2px;
display: inline-block;
}html prettyprint-override"><title>Drag and Drop</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="dragndrop.js"></script>
<body>
<div class="portlet-items">
<div class="portlet-item">
<div class="portlet-name" data-div-width="460" data-div-height="230">
dragabble narrow 1
</div>
</div>
<div class="portlet-item">
<div class="portlet-name" data-div-width="460" data-div-height="230">
dragabble narrow 2
</div>
</div>
<div class="portlet-item">
<div class="portlet-name" data-div-width="960" data-div-height="230">
dragabble wide 1
</div>
</div>
<div class="portlet-item">
<div class="portlet-name" data-div-width="960" data-div-height="230">
dragabble wide 2
</div>
</div>
<div class="portlet-item">
<div class="portlet-name" data-div-width="960" data-div-height="230">
dragabble wide 3
</div>
</div>
<div class="portlet-item">
<div class="portlet-name" data-div-width="960" data-div-height="230">
dragabble wide 4
</div>
</div>
<div class="portlet-item">
<div class="portlet-name" data-div-width="960" data-div-height="230">
dragabble wide 5
</div>
</div>
</div>
<div class="portlet-container">
<div class="portlet-wrapper" style="height:230px;">
<div class="portlet" style="height:188px;">
<div class="portlet-header">Portlet 6</div>
<div class="portlet-content">content</div>
</div>
</div>
<div class="portlet-wrapper" style="height:230px;">
<div class="portlet" style="height:188px;">
<div class="portlet-header">Portlet 5</div>
<div class="portlet-content">content</div>
</div>
</div>
<div class="portlet-wrapper" style="height:230px;">
<div class="portlet" style="height:188px;">
<div class="portlet-header">Portlet 1</div>
<div class="portlet-content">content</div>
</div>
</div>
<div class="portlet-wrapper" style="height:230px;">
<div class="portlet" style="height:188px;">
<div class="portlet-header">Portlet 3</div>
<div class="portlet-content">content</div>
</div>
</div>
<div class="portlet-wrapper" style="height:230px;">
<div class="portlet" style="height:188px;">
<div class="portlet-header">Portlet 2</div>
<div class="portlet-content">content</div>
</div>
</div>
<div class="portlet-wrapper" style="height:230px;">
<div class="portlet" style="height:188px;">
<div class="portlet-header">Portlet 9</div>
<div class="portlet-content">content</div>
</div>
</div>
<div class="portlet-wrapper" style="height:230px;">
<div class="portlet" style="height:188px;">
<div class="portlet-header">Portlet 8</div>
<div class="portlet-content">content</div>
</div>
</div>
</div>
</body>
共有1个答案
常温文
好的，下面修复您的问题：
JSFIDLE
当我们在排序表上删除元素时，我们必须更新删除的元素html并将其设置为您想要的。
如果已将可拖动列表链接到可排序列表，则不必添加可拖放列表。
$( function() {
$( ".portlet-container" ).sortable({
cursor : "move",
placeholder: "ui-state-highlight",
handle: ".portlet-header",
update: function(event, ui){
if($(ui.item).hasClass('portlet-wrapper')){
// we don't add one if we're sorting a pre-existing item
} else {
ui.item.html(portletClone(ui.item))
ui.item.removeClass('portlet-item portlet-name ui-draggable')
.addClass('portlet-wrapper');
}
}
});
$('.portlet-name').draggable( {
connectToSortable: ".portlet-container",
cursor: 'move',
revert: 'invalid',
opacity: 0.7,
helper: portletHelper
});
function portletHelper( event ) {
return portletClone(this);
}
function portletClone(item){
var portletWrapperStr = "<div class='portlet-wrapper portlet-clone' style='height:"+$(item).data("div-height")+"px; width:"+$(item).data "div-width")+"px;'/>";
var portletStr ="<div class='portlet' "+
" style='height:"+($(item).data("div-height")-40-2) +"px;'>"+
" <div class='portlet-header'>"+$(item).html()+"</div>"+
"</div>";
var portlet = $(portletStr);
var portletWrapper = $(portletWrapperStr).append(portlet);
return portletWrapper;
}
});.portlet-container{
display: inline-block;
margin-top:10px;
margin-bottom:10px;
width: 960px;
}
.portlet-wrapper{
overflow:hidden;
}
.portlet{
border-radius: 4px;
border: 1px solid #bbb;
background-color: white;
padding: 10px 10px;
margin-top: 10px;
margin-bottom: 10px;
position:relative;
overflow:hidden;
}
.portlet-header{
height: 25px;
}
.portlet-content{
margin-bottom: 10px;
}
.portlet-options{
float: right;
}
.portlet-placeholder {
border: 1px dotted black;
margin: 0 1em 1em 0;
height: 95%;
}
.portlets-items{
width: 220px;
}
.portlet-item{
margin: 2px;
display: inline-block;
width: 220px;
height: 25px;
}
.portlet-name{
width: 140px;
font-family: Akkurat, Helvetica, Arial, sans-serif;
font-size: 12px;
color: #5c5e5f;
border-radius: 2px;
border: 1px solid #bbb;
padding: 2px;
display: inline-block;
}
.portlet-action{
width: 50px;
margin-left:5px;
color: #5c5e5f;
padding: 2px;
display: inline-block;
}<title>Drag and Drop</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<script src="dragndrop.js"></script>
<body>
<div class="portlet-items">
<div class="portlet-item">
<div class="portlet-name" data-div-width="460" data-div-height="230" >
dragabble narrow 1
</div>
</div>
<div class="portlet-item">
<div class="portlet-name" data-div-width="460" data-div-height="230" >
dragabble narrow 2
</div>
</div>
<div class="portlet-item">
<div class="portlet-name" data-div-width="940" data-div-height="230">
dragabble wide 1
</div>
</div>
<div class="portlet-item">
<div class="portlet-name" data-div-width="940" data-div-height="230" >
dragabble wide 2
</div>
</div>
<div class="portlet-item">
<div class="portlet-name" data-div-width="940" data-div-height="230" >
dragabble wide 3
</div>
</div>
<div class="portlet-item">
<div class="portlet-name" data-div-width="940" data-div-height="230" >
dragabble wide 4
</div>
</div>
<div class="portlet-item">
<div class="portlet-name" data-div-width="940" data-div-height="230" >
dragabble wide 5
</div>
</div>
</div>
<div class="portlet-container">
<div class="portlet-wrapper" style="height:230px;">
<div class="portlet" style="height:188px;">
<div class="portlet-header">Portlet 6</div>
<div class="portlet-content">content</div>
</div>
</div>
<div class="portlet-wrapper" style="height:230px;">
<div class="portlet" style="height:188px;">
<div class="portlet-header">Portlet 5</div>
<div class="portlet-content">content</div>
</div>
</div>
<div class="portlet-wrapper" style="height:230px;">
<div class="portlet"
style="height:188px;">
<div class="portlet-header">Portlet 1</div>
<div class="portlet-content">content</div>
</div>
</div>
<div class="portlet-wrapper" style="height:230px;">
<div class="portlet"
style="height:188px;">
<div class="portlet-header">Portlet 3</div>
<div class="portlet-content">content</div>
</div>
</div>
<div class="portlet-wrapper" style="height:230px;">
<div class="portlet"
style="height:188px;">
<div class="portlet-header">Portlet 2</div>
<div class="portlet-content">content</div>
</div>
</div>
<div class="portlet-wrapper" style="height:230px;">
<div class="portlet"
style="height:188px;">
<div class="portlet-header">Portlet 9</div>
<div class="portlet-content">content</div>
</div>
</div>
<div class="portlet-wrapper" style="height:230px;">
<div class="portlet" style="height:188px;">
<div class="portlet-header">Portlet 8</div>
<div class="portlet-content">content</div>
</div>
</div>
</div>
</body>
类似资料：
-
我正在使用本机拖放html5 api开发拖放界面。我们已经在其他部分使用了jQuery拖动，但是它在这个特定部分的表现很差，所以我们使用原始的JavaScript。 本质上，标记看起来像这样... 我为“dragstart”创建一个addEventListener并运行以下函数 它将我的类完美地应用于原始元素，但我似乎不能移动原始元素。浏览器创建克隆/幽灵图像...我看到你可以创建自己的图像显示，
-
问题内容： 在同一对话框窗口中有两个QListWIdget。都启用了DragDrop功能。如果我将文件拖放到两个ListWidges中的任何一个，程序将识别出该文件并打印出被删除文件的列表。但是除了拖放文件之外，我还希望能够将List小部件Items从一个拖放到另一个。如果我拖动ListItems，则会触发拖放事件。但是它无法识别出哪些项已放置到窗口小部件上。示例代码如下。目的是将列表项从一个Li
-
我试图将jQuery可拖动、可拖放和可排序相结合；然而，我一直有问题。有人能帮帮我吗？ A、 B、C、D、E瓷砖可在上部可放下和可分拣之间移动 此外，我正试图在必要时在任何位置停用和重新激活所有这些。 这是我的，但它很有缺陷，也不漂亮： JS 超文本标记语言
-
我知道可以设置，以更改拖放区上方的光标外观，但几乎没有选项：，，，以及——无自定义或类似选项。 我曾尝试用Javascript和CSS更改游标，比如设置
-
使用@angular/cdk/拖放模块（角度材质拖放）时。。。有没有办法限制drop容器只接受一个值而不是多个值？我试图创建一个表单，用户可以将图像拖放到只有一个项目的字段中。我使用标准示例代码来实现拖放| Angular Material，但无法找到可以限制拖放项目数量的解决方案，第二个无法找到保持拖放列表不变的解决方案（拖放项目将保留在拖放容器中），因此您可以复制项目，而不是将项目移动到拖放容
-
问题内容： 在AngularJS中的元素 上是否易于使用 ？ 如果重新排序项目会很棒，那就是将自动传播的订单重新排列到源数组中。恐怕这两个系统会打架。有一个更好的方法吗？ 问题答案： Angular UI具有可排序的指令，请单击此处进行演示 位于ui-sortable的代码，用法：