jQuery可拖动/可拖放和可排序组合 [英] Jquery draggable/droppable and sortable combined
问题描述
我被要求创建一个正方形网格，其中每个正方形可能包含也可能不包含链接，并且这些链接应该能够在网格上移动.
I was asked to create a grid of squares, where each square may or may not contain a link and these links should be able to be moved about the grid.
我认为可拖动/可拖放将是可行的方式，并且它工作正常，但是，现在，我们希望能够将可拖动对象互换，如果一个被放置在另一个之上.因此，现在看来可排序已经成为要走的路.但是，sortable看起来更像是用于列表，而我却没有像列表那样编写它.
I figured that draggable/droppable would be the way to go and it works fine, however, now we want to be able to have the draggables swap about if one is dropped on top of another. So it looks now like sortable would have been the way to go. However, sortable looks more like it's meant for lists whereas I haven't written it like a list.
是否有一种简单的方法可以使到目前为止的工作正常进行，还是需要使用sortable完全重写?我是javascript的新手，花了我一段时间才走到这一步，我不是在要求代码，但我害怕必须再次弄清楚整个事情的想法！有什么意见吗?
Is there an easy way to make what I have so far work, or do I need to totally rewrite this using sortable? I'm new to javascript, it took me a while to get this far, and I'm not asking for code but I dread the thought of having to figure the whole thing out again! any opinions?
这是我的代码的小提琴: http://jsfiddle.net/kvVkT/
Here's a fiddle of my code: 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
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])，连字符(-")，下划线("_)，冒号(":)和点号(".).
ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").
现在让我们清理一些代码.对于您当前的情况，我建议使用 .draggable() 和
Now let's clean up some of your code. For your current situation, I recommend using .draggable() and .droppable().
我从头开始，但保留了draggable& jsfiddle 中使用的droppable选项.这是我想出的(可以随意更改它的任何方面):
I started from scratch, but kept the draggable & droppable options used in your jsfiddle. Here is what I came up with (feel free to change any aspect of it):
演示:
http://jsfiddle.net/dirtyd77/Y8dLz/
http://fiddle.jshell.net/dirtyd77/Y8dLz/show/
DEMO:
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;
}
我希望这就是您要寻找的！如果您需要任何进一步的解释或有其他疑问，请告诉我！编码愉快！
I hope this is what you're looking for! Please let me know if you need any further explanation or have any additional questions! Happy coding!
这篇关于jQuery可拖动/可拖放和可排序组合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
