是否有任何可配置选项来实现像替换列表项目而不是在JQuery可排序UI中交换项目之类的功能。当前的功能类似于Item1与Item2交换,反之亦然。我需要一个功能,如果item2被拖放到Item1上,item2应该替换Item1,而Item2的位置将为空。任何帮助?谢谢。Jquery可排序 - 替换项目而不是交换项目
0
A
回答
0
你好演示http://jsfiddle.net/CZm9C/2/
现在从第一箱拖到第二。希望这有助于和请让我知道,如果我错过了什么,:)
jQuery的
$(document).ready(function(){
$(".leftDiv .item").draggable({
helper: function(ev, ui) {
return "<span class='helperPick'>"+$(this).html()+"</span>";
},
connectToSortable: ".rightDiv"
});
$(".rightDiv").sortable({
'items': ".item",
'receive': function(event, ui){
// find the class of the dropped ui, look for the one with the integer suffix.
var clazz = getClassNameWithNumberSuffix(ui.item);
$('.leftDiv .' + clazz).draggable("option", "revert", true)
if($('.rightDiv .' + clazz).length > 1){
$('.rightDiv .' + clazz + ':not(:first)').remove();
}
$('.leftDiv .' + clazz).remove();
}
});
});
function getClassNameWithNumberSuffix(el) {
var className = null;
var regexp = /\w+\d+/;
$($(el).attr('class').split(' ')).each(function() {
if (regexp.test(this)) {
className = this;
return false;
}
});
return className;
}
HTML
<div class="leftDiv"> drag to ==>
<div class="item item1">Item 1</div>
<div class="item item2">Item 2</div>
<div class="item item3">Item 3</div>
<div class="item item4">Item 4</div>
<div class="item item5">Item 5</div>
<div class="item item6">Item 6</div>
</div>
<div class="rightDiv"> ==> To this
<div class="item item1">Item 1</div>
<div class="item item2">Item 2</div>
<div class="item item3">Item 3</div>
<div class="item item4">Item 4</div>
<div class="item item5">Item 5</div>
<div class="item item6">Item 6</div>
</div>
CSS
.leftDiv, .rightDiv {width:120px; float:left; border:1px solid #000; padding:5px; margin:10px; min-height:130px}
.rightDiv {margin-left:40px}
.item {height:20px; line-height:20px; text-align:center; border:1px solid #EEE; background-color:#FFF}
.helperPick {border:1px dashed red; height:20px; line-height:20px; text-align:center; width:120px}
+0
感谢您的代码和帮助。我真的在Sortable中查看此功能,而不是从可拖动项目连接到Sortable列表拖动。我能够隐藏占位符并获得替换的感觉,但不幸的是,我无法确定要替换的放置位置的索引。对于我来说,接收方法本身并没有调用。谢谢。 – 2012-04-24 13:39:31
0
您可以用下面的代码做到这一点:
$('#container').sortable({
connectWith: '#container',
items: '.children', //#container > .children
cursor: 'move',
receive: function(event, ui) {
var item = $(ui.item);
var sender = $(ui.sender);
sender.append(item.siblings('.children'));
}
});
相关问题
- 1. 替换Vim中的项目而不替换旧的替换项目
- 2. isEqualToString是否可以交换项目?
- 3. jquery可排序项目
- 4. Angularjs ui可排序 - 替换已丢弃项目的内容
- 5. 替换项目而不是给出整个路径
- 6. 与跨度替换项目的Jquery
- 7. Array-within-array项目替换
- 8. 交换ListView项目视图
- 9. jQuery可排序替换而不是追加?
- 10. 使用basiljs交换项目
- 11. 替换项目DataGridViewComboBoxCell c#
- 12. 替换observableArray中的项目
- 13. K2导出项目,而不是项目
- 14. 替换项目文件夹后Xcode项目不工作
- 15. jquery可排序拖放项目
- 16. Flexbox项目可以更换而不是展开其容器吗?
- 17. 用jQuery切换可见列表项目
- 18. 交替项目样式
- 19. jquery交换排序排序
- 20. 排序项目
- 21. ExtJS的可更换项目
- 22. 替换memcached中的项目而不更改到期时间
- 23. 项目转换
- 24. jQuery UI可排序忽略与项目不匹配的项目选择器
- 25. Javascript:用另一组项目替换项目
- 26. 用一个新项目替换集合中的项目
- 27. 将iPhone项目转换为iPad项目?
- 28. R snaive() - 要替换的项目数不是替换长度的倍数
- 29. 交换清单项目的位置
- 30. React在数组中替换项目
您可以随时绑定到拖/放事件和自己处理... – 2012-04-24 01:19:58
你可能会使用拖动和dropable而非排序会更好。 – Rob 2012-04-24 01:20:41
@Brad Christie:在文档中我找不到任何有关Jquery Sortable的drap/drop事件。你能简单解释一下吗?谢谢 – 2012-04-24 01:21:56