用jquery改变div的位置拖动一滴 [英] Change position of divs with jquery drag an drop
问题描述
我正在尝试建立一个网站,用户可以将某些项目(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被删除)如果我已经犯了一个错误,但我不能删除另一个项目在现在是空的
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?
是否可以两个更改
这是我的代码的相关部分:
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>
编辑:
这是现在的工作页面:拖放任务
推荐答案
这是一个工作示例: http://jsfiddle.net/Gajotres/ zeXuM /
我认为您的所有问题都在这里解决。
I think all of your problems are solved here.
- 启用/禁用放弃工作
- 元素返回不再将它们下降到其他元素下方
- 元素返回不再隐藏/删除它们
- 更好的元素定位(看起来更好)
- 它适用于移动设备(在Android 4.1.1 Chrome和iPhone上测试)
- enable/disable dropping works
- elements returning no longer drops them below other elements
- elements returning no longer hides/remove them
- better elements positioning (it looks better)
- it works on mobile devices (tested on Android 4.1.1 Chrome and 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屋!