问题描述
我有拖放项目,打算从一个div
拖放到另一个div
.创建它们时,我会捕获每个项目在隐藏字段中的原始位置.
I have drag-and-drop items, intended to be dragged from one div
and dropped into another div
. I capture the original position of each item in hidden fields when they are created.
我想让物品回到原始的div
和dblclick
上的位置,但是它们总是在放置目标div
内重新放置.
I want to get the items to go back to the original div
and location on dblclick
, but they always relocate inside the drop target div
.
有什么想法吗?
<div id="cardPiles">
<div id="D1" class="draggable" ondblclick="rev(this)">1</div>
<div id="D2" class="draggable" ondblclick="rev(this)">2</div>
<div id="D3" class="draggable" ondblclick="rev(this)">3</div>
<div id="D4" class="draggable" ondblclick="rev(this)">4</div>
<div id="D5" class="draggable" ondblclick="rev(this)">5</div>
<div id="D6" class="draggable" ondblclick="rev(this)">6</div>
</div>
function rev(me) {
var b = $(me).text();
var h = $('#H' + b).text();
var s = h.split(',');
var top = s[0];
var left =s[1];
$(me).parent().css({ position: 'relative' }); //tried absolute also
$(me).css({top:top,left:left,position:'absolute' });
}
推荐答案
这是一个可能的答案.如果不适合您的用例,请用更多详细信息编辑您的帖子.
Here is a possible answer. If it does not fit your use case, edit your post with more details.
工作示例: https://jsfiddle.net/Twisty/u1rd9dpg/6/
HTML
<div id="cardPiles">
<div id="D1" class="draggable ui-widget-content" data-origin="">1</div>
<div id="D2" class="draggable ui-widget-content" data-origin="">2</div>
<div id="D3" class="draggable ui-widget-content" data-origin="">3</div>
<div id="D4" class="draggable ui-widget-content" data-origin="">4</div>
<div id="D5" class="draggable ui-widget-content" data-origin="">5</div>
<div id="D6" class="draggable ui-widget-content" data-origin="">6</div>
</div>
<div id="cardDrop">
</div>
JQuery
function rev(me) {
console.log("DoubleClick Detected.");
var pos = me.data("origin");
console.log("Returning to: ", pos);
var $o = me.clone();
$o.draggable({
cursor: "move",
start: log
});
me.remove();
if ($("#cardPiles div").length == 0) {
$("#cardPiles").append($o);
return true;
}
$("#cardPiles .draggable").each(function(k, v) {
var txt = parseInt($(v).text());
if ($o.data("order") < txt) {
$(v).before($o);
return false;
} else {
$("#cardPiles").append($o);
}
});
}
function log(e, ui) {
var pos = ui.offset;
var $ob = $("#" + ui.helper.attr("id"));
pos.order = parseInt(ui.helper.text());
$ob.attr("data-top", pos.top);
$ob.attr("data-left", pos.left);
$ob.attr("data-order", pos.order);
$ob.attr("data-origin", [pos.top, pos.left, pos.order].join(","));
console.log("DragStart Position: ", pos);
console.log("Logged: " + [$ob.data("top"), $ob.data("left"), $ob.data("order")].join(","));
}
$(function() {
$(".draggable").draggable({
cursor: "move",
start: log
});
$("#cardDrop").on("dblclick", ".dropped", function() {
console.log("Origin found: ", $(this).data("origin"), $(this).data("top"));
rev($(this));
});
$("#cardDrop").droppable({
accept: "#cardPiles div",
activeClass: "ui-state-highlight",
drop: function(e, ui) {
var $drop = ui.draggable.clone();
console.log("Dropped. Origin: ", $drop.data("origin"));
$drop.removeAttr("style");
$drop.addClass("dropped");
$(this).append($drop);
ui.draggable.remove();
var c = $("#cardDrop div").length;
}
}).sortable({
revert: true
});
});
我不确定您是否需要在CSS中执行此操作,但是我根据顺序进行了操作,然后让CSS定义它们在列表中的显示方式.
I'm not sure if you need to do this in CSS or not, but I went based on the order and let the CSS just define how they appear in the list.
drag
启动时,我将原点详细信息记录到各种数据属性中.这样,当与该元素发生交互时,便可以在以后检索它们.
When the drag
starts, I log the origin details to various data attributes. This allows them to be retrieved later when there is an interaction with just that element.
发生drop
时,我克隆了原始文件,然后追加了克隆文件.不必这样做,但是对我来说,它可以帮助我确定正在发生的事情.由于不再是draggable
,因此您可以删除该类,但我只是添加了dropped
以便能够更轻松地捕获DoubleClick事件.
When drop
happens, I clone the original and then append the clone. Do not have to do this, yet for me, it helps me identify whats happening. Since it's no longer draggable
, you could remove the class, but I just added dropped
to be able to more easily catch the Double Click event.
当dblclick
在我们的对象上触发时,我再次对其进行克隆,然后将其重新添加回去.再次将其设置为.draggable()
.我寻找下一个物品的编号并将其放在下面.
When dblclick
fires on our object, I clone it again, and re-append it back. Make it .draggable()
again too. I hunt for the next item's number and fit it in underneath.
如果其中的文本不那么容易排序,则可以添加order
属性或填充data-order
属性.您可以在拖动它时执行此操作,或者从ID中读取它……不确定哪种方法最适合您.
If the text within is not easy to order like that, I would add an order
attribute or populate the data-order
attribute. You can do this when it's dragged or read it from the ID... not sure what might work best for you.
您可以一遍又一遍地执行此操作,并根据需要将其全部拖出#cardPile
.
You can do this over and over and drag all of them out of #cardPile
if you like.
这篇关于jQuery拖放拖放到原始位置并双击div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!