使用jquery拖放更改div的位置 [英] Change position of divs with jquery drag an drop
问题描述
我正在尝试构建一个网站，用户可以在其中将一些项目(div 中的一个项目)拖动到页面上的其他 div.它不是表格左右，只是页面某处的 div.
I'm trying to build a website where the user can drag some items (one item in on div) to other divs on the page. It' not a table or so, just divs somewhere on the page.
使用 html5 拖放效果很好，现在我尝试在移动设备上执行此操作.我可以将项目拖到 div 中，将它们放在那里并阻止这个 dropzone，因为只有一个元素应该在 dropzone 中.如果我犯了错误，我也可以将此元素拖动到另一个 div 或页面上的其他位置(可放置区域仅在第一次放置 div 时才有效)，但我不能在 div 中放置另一个项目，现在是空的再次.
With html5 drag&drop it works well, now I try to do this for mobile devices. I can drag items to divs, drop them there and block this dropzone, because only one element should be in a dropzone. I also can drag this element to another div or somewhere else on the page (droppable areas only work on first time a div is dropped) if I've had make a mistake but then I cannot drop another item in the div which is now empty again.
如何才能再次启用在此 Dropzone 中的放置?
How can I enable dropping in this Dropzone again?
如果一个被拖到另一个上，是否可以同时改变两个 div 的位置?
And is it possible to two change the position of two divs if one is dragged on another?
这是我的代码的相关部分:
Here is the relevant part of my code:
<script type="text/javascript">
$ (init);
function init() {
$(".dragzones").draggable({
start: handleDragStart,
cursor: 'move',
revert: "invalid",
});
$(".dropzones").droppable({
drop: handleDropEvent,
tolerance: "touch",
});
}
function handleDragStart (event, ui) {}
function handleDropEvent (event, ui) {
$(this).droppable('disable');
ui.draggable.position({of: $(this), my: 'left top', at: 'left top'});
ui.draggable.draggable('option', 'revert', "invalid");
}
</script>
<body>
<div id="alles">
<div class="dropzones" id="zone1"><div class="dragzones" id="drag1">Item 1</div></div>
<div class="dropzones" id="zone2"><div class="dragzones" id="drag2">Item 2</div></div>
<div class="dropzones" id="zone3"><div class="dragzones" id="drag3">Item 3</div></div>
<div class="dropzones" id="zone4"><div class="dragzones" id="drag4">Item 4</div></div>
<div class="dropzones" id="zone11"></div>
<div class="dropzones" id="zone12"></div>
<div class="dropzones" id="zone13"></div>
<div class="dropzones" id="zone14"></div>
</div>
</body>
这是现在工作的页面:Drag&删除任务
Here is the now working page: Drag&Drop Task
推荐答案
这是一个工作示例:http://jsfiddle.net/Gajotres/zeXuM/
我想你所有的问题都在这里解决了.
I think all of your problems are solved here.
- 启用/禁用丢弃作品
- 返回的元素不再将它们置于其他元素之下
- 返回的元素不再隐藏/移除它们
- 更好的元素定位(看起来更好)
- 它适用于移动设备(在 Android 4.1.1 Chrome 和 iPhone 上测试)
这是使用的 jQuery 代码:
Here's a jQuery code used:
$(document).on('pageshow', '#index', function(){
$(".dragzones").draggable({
start: handleDragStart,
cursor: 'move',
revert: "invalid",
});
$(".dropzones").droppable({
drop: handleDropEvent,
tolerance: "touch",
});
});
function handleDragStart (event, ui) { }
function handleDropEvent (event, ui) {
if (ui.draggable.element !== undefined) {
ui.draggable.element.droppable('enable');
}
$(this).droppable('disable');
ui.draggable.position({of: $(this),my: 'left top',at: 'left top'});
ui.draggable.draggable('option', 'revert', "invalid");
ui.draggable.element = $(this);
}
// This is a fix for mobile devices
/iPad|iPhone|Android/.test( navigator.userAgent ) && (function( $ ) {
var proto = $.ui.mouse.prototype,
_mouseInit = proto._mouseInit;
$.extend( proto, {
_mouseInit: function() {
this.element
.bind( "touchstart." + this.widgetName, $.proxy( this, "_touchStart" ) );
_mouseInit.apply( this, arguments );
},
_touchStart: function( event ) {
this.element
.bind( "touchmove." + this.widgetName, $.proxy( this, "_touchMove" ) )
.bind( "touchend." + this.widgetName, $.proxy( this, "_touchEnd" ) );
this._modifyEvent( event );
$( document ).trigger($.Event("mouseup")); //reset mouseHandled flag in ui.mouse
this._mouseDown( event );
//return false;
},
_touchMove: function( event ) {
this._modifyEvent( event );
this._mouseMove( event );
},
_touchEnd: function( event ) {
this.element
.unbind( "touchmove." + this.widgetName )
.unbind( "touchend." + this.widgetName );
this._mouseUp( event );
},
_modifyEvent: function( event ) {
event.which = 1;
var target = event.originalEvent.targetTouches[0];
event.pageX = target.clientX;
event.pageY = target.clientY;
}
});
})( jQuery );
本示例中使用的 touchFix 插件的原作者是 Oleg Slobodskoi.
Original author of a touchFix plugin used in this example is Oleg Slobodskoi.
这篇关于使用jquery拖放更改div的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
