問題描述
我正在嘗試構建一個網站，用戶可以在其中將一些項目(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的位置的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！