Jquery可拖放和可排序的组合
Jquery draggable/droppable and sortable combined
我被要求创建一个正方形网格,其中每个正方形可能包含或可能不包含链接,这些链接应该能够在网格中移动。
我认为可拖拽/可拖放将是一种方式,它工作得很好,然而,现在我们希望能够有可拖拽的交换,如果一个被放在另一个的顶部。所以现在看来排序是可行的。然而,sortable看起来更像是用于列表的,而我并没有像列表那样编写它。
是否有一个简单的方法,使我有什么到目前为止的工作,或者我需要完全重写这个使用排序?我是javascript的新手,我花了一段时间才走到这一步,我并不是要你写代码,但我害怕再次把整个事情弄清楚!任何意见吗?
下面是我的代码:http://jsfiddle.net/kvVkT/
和代码:
html<div id="gridcontainer">
<div id="-2:-2" class="droppable occupied">
<a href="" id ="508" class="bookmark draggable white" title="white" "target="_blank">1</a>
</div>
<div id="-2:-1" class="droppable">2</div>
<div style="clear:both"></div>
<div id="-2:0" class="droppable">3</div>
<div id="-2:1" class="droppable occupied">
<a href="" id ="567" class="bookmark draggable white" title="white" "target="_blank">4</a>
</div>
<div style="clear:both"></div>
</div>
css #gridcontainer{position:relative;padding:25px;color:#ff0004;background:#ffffff;}
.droppable{width:65px; height:65px;float:left; margin:5px;background:#000000;}
.bookmark {float:left;width:65px; height:65px;display:block;position:absolute;}
.position{float:left;width:65px; height:65px;display:block;}
.position:hover{background-image:url(../img/tilehover.png);}
.bookmark.ui-draggable-dragging {-moz-box-shadow: 0 0 5px #d9d9d9; -webkit-box-shadow: 0 0 5px #d9d9d9; box-shadow: 0 0 5px #d9d9d9;}
.draggable{ background:#888888;}
[draggable] {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}
javascript $('.draggable').draggable({ start: function() {$('#dropdownAddTile').slideDown();}, stop: function() {$('#dropdownAddTile').slideUp();}, containment: '#container', snap:'.droppable', snapMode:'inner', revert:'invalid',snapTolerance: 32});
$('.droppable').droppable({drop: handleDropEvent, accept: function(e){if(e.hasClass('draggable')) { if (!$(this).hasClass('occupied')) {return true; }}}});
function handleDropEvent( event, ui ) {
event.preventDefault();
var draggable = ui.draggable;
var droppable = $(this);
var droppableId = $(this).attr("id");
var draggableId = ui.draggable.attr("id");
$('.draggable').draggable({containment: '#container', snap:'.droppable', snapMode:'inner', revert:'invalid',snapTolerance: 32});
$('.droppable').droppable({drop: handleDropEvent, accept: function(e){if(e.hasClass('draggable')) { if (!$(this).hasClass('occupied')) {return true; }}}});
var initPosit = ui.draggable.parent().attr('id');
//save new position
$.post("tiles/updateTilePosition", { draggableId:draggableId, droppableId: droppableId }).done(function(data) {
//alert(data);
})
$(this).addClass('occupied');
ui.draggable.parent().removeClass('occupied');
if($(ui.draggable).parent() !==$(this)){
$(ui.draggable).appendTo($( this ));
}
}
如有任何意见
首先,永远不要使用以数字或符号开头的id。根据这个解决方案:
ID和NAME标记必须以字母([a- za -z])开头,后面可以跟着任意数量的字母、数字([0-9])、连字符("-")、下划线("_")、冒号(":")和句点("。")。
现在让我们清理一些代码。根据您目前的情况,我建议使用.draggable()
和.droppable()
。
我从零开始,但保留了draggable
&droppable
选项在您的文件中使用。以下是我的想法(可以随意修改):
演示:
http://jsfiddle.net/dirtyd77/Y8dLz/
http://fiddle.jshell.net/dirtyd77/Y8dLz/show/
$(function () {
$('#container div').draggable({
containment: "#container",
helper: 'clone',
snap: true,
snapMode: 'inner',
snapTolerance: 32,
revert: 'invalid'
});
$('#container div').droppable({
hoverClass: 'ui-state-highlight',
drop: function (event, ui) {
var _drop = $(this),
_drag = $(ui.draggable),
_dropChildren = _drop.children(), //original drop children
_dragChilden = _drag.children(); //original drag children
if(_dropChildren.length > 0){
_dropChildren.appendTo(_drag);
}
_dragChilden.appendTo(_drop);
}
});
});
HTML: <div id="container">
<div>
<a href="#somelink1" class="link1">Link 1</a>
</div>
<div></div>
<div>
<a href="#somelink2" class="link2">Link 2</a>
</div>
<div></div>
<div>
<a href="#somelink3" class="link3">Link 3</a>
</div>
<div>
<a href="#somelink1" class="link1">Link 4</a>
<a href="#somelink3" class="link3">Link 5</a>
</div>
</div>
CSS: div:not(#container) {
border:1px solid orange;
}
#container {
padding:20px;
margin:10px;
float: left; /* needed for containment option */
width: 336px;
height: auto;
border:1px solid green;
}
#container div {
margin: 4px;
padding: 0px;
float: left;
width: 100px;
height: 90px;
text-align: center;
}
.link1{
color: purple;
}
.link2{
color: red;
}
.link3{
color: green;
}
我希望这是你正在寻找的!如果您需要进一步的解释或有任何其他问题,请让我知道!编码快乐!
- JavaScript数组排序(函数)用于对表行进行排序,而不是排序
- 使用promise和mongoose对文档进行排序
- Selectize.js:如何对整数值的选项进行排序
- Javascript排序的图像弹出窗口..可以't单独弹出
- 根据id将json数组组合为一个json数组
- 如何通过引用var Using DataTables来进行分页或排序
- 接受不在列表中的值-引导组合框
- 为什么HTML5拖放的目标是孩子?(可排序列表)
- 使用组合框排序
- 如何创建多级可排序的投资组合
- 哪个参数与运算符一起排序,作为 Javascript 中的预柯里函数和组合
- 组合然后排序Javascript数组.得到不可预测的结果
- 对具有字母和数字组合的数据进行排序,该数据在javascript中的json数组中具有值
- 使用JavaScript从SharePoint组合和排序两个数据集合
- Jquery可拖放和可排序的组合
- 如何在javascript中对组合2个数组进行排序(如c#(array.sort()))
- Javascript - 排序字母数字组合
- jQuery(同位素)-组合过滤和排序
- 对javascript对象进行排序,并将对象组合成一个数组
- Bootstrap模式停止工作后,我排序投资组合