Jquery 可拖动/可放置和可排序组合
Posted
技术标签:
【中文标题】Jquery 可拖动/可放置和可排序组合【英文标题】:Jquery draggable/droppable and sortable combined 【发布时间】:2013-04-13 16:29:18 【问题描述】:我被要求创建一个正方形网格,其中每个正方形可能包含也可能不包含链接,并且这些链接应该能够在网格周围移动。
我认为 draggable/droppable 将是可行的方法,它工作正常,但是,现在我们希望能够在将一个拖放到另一个之上时交换可拖动对象。所以现在看起来 sortable 本来就是要走的路。然而, sortable 看起来更像是用于列表,而我并没有像列表那样写它。
有没有一种简单的方法可以使我到目前为止的工作,或者我需要使用 sortable 完全重写它?我是 javascript 新手,我花了一段时间才走到这一步,而且我不是要代码,但我害怕不得不再次弄清楚整个事情的想法!有什么意见吗?
这是我的代码:http://jsfiddle.net/kvVkT/
和代码:
<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
#gridcontainerposition:relative;padding:25px;color:#ff0004;background:#ffffff;
.droppablewidth:65px; height:65px;float:left; margin:5px;background:#000000;
.bookmark float:left;width:65px; height:65px;display:block;position:absolute;
.positionfloat:left;width:65px; height:65px;display:block;
.position:hoverbackground-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 ));
任何意见都非常感谢
【问题讨论】:
网格的尺寸是多少?最大列/行?您只能移动链接还是 div 可以在网格内移动? 另外,是否有任何代码必须保持原样?或者我可以编辑它的任何方面吗? @Dom,感谢您的关注,很抱歉延迟发现您的回复,我在英国。回答你的问题。网格可以由用户添加行或列。这就是为什么每个 droppable 的 id 都像 1:4 这样的原因。只要代码有效,您就可以更改代码的任何方面!目前你只能移动链接,但如果它需要是 div,我想这没关系,只要它们仍然是某种可点击的链接并且它们可以移动 我发布了一个解决方案,如果您正在寻找,请告诉我。 【参考方案1】:首先,从不使用以数字或符号开头的 ID。据此solution:
ID 和 NAME 标记必须以字母 ([A-Za-z]) 开头,后跟任意数量的字母、数字 ([0-9])、连字符 ("-")、下划线 (" _")、冒号 (":") 和句点 (".")。
现在让我们清理您的一些代码。对于您目前的情况,我建议使用.draggable()
和.droppable()
。
我从头开始,但保留了jsfiddle 中使用的draggable
和droppable
选项。这是我想出的(随意更改它的任何方面):
演示: http://jsfiddle.net/dirtyd77/Y8dLz/ http://fiddle.jshell.net/dirtyd77/Y8dLz/show/
JAVASCRIPT:
$(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;
我希望这就是您想要的!如果您需要任何进一步的解释或有任何其他问题,请告诉我!编码愉快!
【讨论】:
以上是关于Jquery 可拖动/可放置和可排序组合的主要内容,如果未能解决你的问题,请参考以下文章