个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
jQuery draggeble/sortable demo仅显示如何删除可拖动项的克隆(可拖动项和可排序项具有相同的结构)。我想删除一个不同的 DOM 结构。例如，当我拖动一个简单的 div 时，被拖动的元素会转换为更复杂的 DOM 结构。查看jsfidler例如，注意 helper 是如何变化的，我想删除 helper 但原来的项目被删除了。
使用简单的可拖动项目和可放置容器是可行的，但我希望能够将项目放置在可排序容器的任何部分并能够重新排序元素。
知道如何实现我正在寻找的东西吗？
$(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;
}<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>最佳答案
好的，以下解决了您的问题:
当我们将元素放在 sortable 上时，我们必须更新放置的元素 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>关于javascript - 如何将一个draggable拖放到一个sortable中，拖放的item不是原始元素而是一个自定义的helper，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35947947/
24
4
0
我正在使用 jquery-ui sortable 并且我有一个 sortable inside other!重点是当我尝试使用 sortstop 函数时，parent sortable 也会运行(!请
我正在使用来自 Google CDN 的 jQuery 1.7 和 jQuery UI 1.8(因此我拥有最新版本)。 我的页面上有两个元素，一个标题导航和一个内容区域，其中包含与每个标题列表项相对应
我正在努力使以下工作正常进行: My Playlist drag div
我有以下 jQuery 代码: var isOk = true; $('#edit').click(function () { if (isOk) { $('table tbo
我正在使用 Rubaxas Sortable.js 来对列表进行排序。 我的问题是我只能将“.group_container”移动到主支架的底部，而不能移动到其他列表之间。 这是一个 jsFiddle
我正在使用 jQuery UI“可排序”插件来选择和排序项目。 我将插件设置为有两个列表，一个用于“可用”项目，第二个用于“选定”项目。 插件按预期工作，我可以将项目从一个列表移动到另一个列表。 但是
我正在使用 jQuery UI“可排序”插件来选择和排序项目。 我将插件设置为有两个列表，一个用于“可用”项目，第二个用于“选定”项目。 插件按预期工作，我可以将项目从一个列表移动到另一个列表。 但是
我正在 ui-sortable 的帮助下创建一个带有可拖动行的表格
这就是我要实现的目标:我有两个可排序列表，右边的列表连接到左边的列表。我希望能够从左侧列表中删除项目，方法是将它们放在垃圾箱中。我正在尝试将垃圾箱实现为 Droppable，但在 Droppable
考虑以下HTML i1 i2 i3 i4 i5 i6 i7 i8 我正在 sortcontaine
有人在http://jsfiddle.net/hKYWr/上整理了一个很好的 fiddle 。关于使用 angular-ui 和 jqueryui sortable 来获得良好的可排序效果。 如何在两
我正在使用这个小示例测试 Sortable.js 列表。我有一个要从中拖动的元素列表，以及另一个通过删除元素来存储它们的列表。 注意:Sortable.js 与 JQuery-ui sortable
stackoverflow上的相关问题0和 1 .JSFiddle:http://jsfiddle.net/ashugupt/hpncs/1/ 也试过如下排序: $(".fields").sortab
当使用 StofDoctrineExtensions(这是 Gedmo Doctrine Extensions 的 Symfony2 端口)可排序行为时，我不断收到此错误: This reposito
我正在尝试对列表进行排序，我从数据库中获取元素但是... Error: cannot call methods on sortable prior to initialization; attempt
我有一个容器，里面有 2 个 div: 一个是向左浮动的小的固定宽度左侧 div(类似于侧边菜单)。 第二个是流动的 div，它也向左浮动(以便能够与固定的 div 一起堆叠)。 第二个 div 具有
我已经将 sortable 和 jquery 引用导入到我的 html 中，但是，它说 Uncaught TypeError: $(...).sortable is not a function 和
我有一个 JQuery 可排序(1.7.1 可以根据需要更改)列表，如下所示: 1 2 3 4 5 第二个项目被锁定，因此如果尝试将项目 5 移动到插槽 2 中，它将进入插槽
我有两个可排序的列表，其中包含工作订单。第二个列表是Route，而第一个列表只是尚未添加到Route 列表中的所有工单的列表。这个想法是，用户按照特定顺序将工作订单拖到Route中，重新排列工作订单以
我正在使用 jqueryui 可排序小部件。我需要获取当前拖动元素的数据属性。 $(this).data('attribute_name') 在这里不起作用。我也尝试过其他一些方法，但没有得到正确的结
我是一名优秀的程序员,十分优秀！