- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个可拖动对象列表,可以将其放入可放置对象中,当发生这种情况时,可拖动对象将被克隆并转换为可放置对象。
这个新的 droppable 是贪婪的,但是当它们接收到可拖动时,两个放置事件都会被触发(来自可拖动的放置事件和来自可放置区域的放置事件)
我做错了什么?我只需要事件触发一次(从新的 droppable 中)
这是一个fiddle :将一个项目拖放到红色区域,然后将另一个项目拖放到已放置的项目中。查看控制台日志。
HTML
<div id="main_droppable"></div>
<ul>
<li class="item" data-id="1">1</li>
<li class="item" data-id="2">2</li>
<li class="item" data-id="3">3</li>
<li class="item" data-id="4">4</li>
<li class="item" data-id="5">5</li>
</ul>
JS
$(".item").data("active", false);
$(".item").draggable({
helper: "clone",
appendTo: "#main_droppable",
scroll: false,
start: function(event, ui)
{
if($(this).data("active") == false)
{
$(this).fadeTo(100, 0.2);
}
else
{
return false;
}
},
revert: function(is_valid_drop)
{
if(!is_valid_drop)
{
$(this).fadeTo(100, 1).data("active", false);
return true;
}
else
{
$(this).data("active", true);
}
}
});
$("#main_droppable").droppable({
drop: function(event, ui)
{
console.log("drop main");
addNewItem(ui.helper);
return false;
}
});
function addNewItem($oldItem)
{
var $newItem = $oldItem.clone(false).fadeTo(100, 1).data("active", true);
$oldItem.remove();
$newItem.draggable({
containment: "parent",
});
$newItem.droppable({
greedy: true,
drop: function(event, ui)
{
console.log("drop item");
$(this).fadeTo(100, 0, function()
{
var $originalItem = $("ul").find(".item[data-id=" + $(this).data("id") + "]");
$originalItem.fadeTo(100, 1).data("active", false);
$("#main_droppable").find(".item[data-id=" + $originalItem.data("id") + "]").remove();
});
addNewItem(ui.helper);
}
});
$("#main_droppable").append($newItem);
}
CSS
#main_droppable
{
border: 1px solid red;
min-height: 50px;
}
.item
{
display: inline-block;
border: 1px solid blue;
width: 25px;
height: 25px;
}
最佳答案
嗯...它与特定的类有关...
当我放下可拖动对象并克隆它时,ui-draggable-dragging
类保持在原位。因此,为了使其正常工作,我必须将其删除,然后一切都会按预期进行。
我改变这一行:
var $newItem = $oldItem.clone(false).fadeTo(100, 1).data("active", true);
进入这个:
var $newItem = $oldItem.clone(false).fadeTo(100, 1).data("active", true).removeClass("ui-draggable-dragging");
更新了 fiddle :https://jsfiddle.net/3118zjg1/1/
关于jQuery UI 的贪婪 droppable 无法按预期工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50415037/
作为 JavaScript/JQuery 新手,我在弄清楚如何实现将多个可放置对象的放置函数注册到一个函数时遇到了一些问题,例如: $('#droppableLW').droppable({
我正在制作一个涉及可排序的用户界面,其中有可放置的列表项。这是它的一个 fiddle : http://jsfiddle.net/NRkwx/ 问题是这样的:当您开始排序并移动列表项时,可放置项也会移
如果屏幕上的可拖动图像被放入拖放区(也是图像,而不是 var counter = 0;),我正在尝试增加计数器的值(div)。 $( "#goldbag" ).draggable({ revert:
使用 JQuery draggable/droppables 允许我将 div 从一个容器拖到另一个容器并将它们作为子项插入到容器中。我可以在 HTML 中看到移动,但在屏幕上,当我将可拖动对象释放到
以下 jsbin 最好地解释了不触发 over 事件的情况。 . 执行以下操作: 将可拖动对象放置在内部可放置对象(蓝色)上。 将可拖动对象拖到外部可放置对象(红色)上,它应该将其背景颜色更改为绿色,
我正在尝试在学习应用程序中实现拖放功能。 这很好用,将一个项目放到可放置区域就像它应该的那样工作。 // Adding drop function to each category j
我正在使用 jquery ui 拖放。 如果可放置 div ( #dropContainer ) 的 css 位置为相对/绝对/固定,则放置的元素不会放置在我的鼠标指针上。 If I remove
一个小问题,希望有一个简单的答案,我正在使用 jQuery 可拖动和可放置的项目将项目放入停靠栏。使用以下代码进行转换。 $("#dock").droppable({ drop
我对以下事件有看法。 View ID 是“folders-block”。 我的元素是 View 是这样的: 下面是主干中的事件
如何动态创建 div 并将其放入可放置的 div 中? 这是实际的代码。 jQuery UI Droppable - Default functionality
我有一个包含不同可拖动元素的容器,并且有一些“目标”div 的列表,用户可以在其中放置可拖动元素。 示例:想象一下,您有一个“标签”列表(房屋、计算机、汽车等)和一些作为目标的文档列表(所有文档都是
$(".LWdrop").droppable({ accept: ".LW", drop: function(event, ui){
我对 jQuery 有点陌生,希望有人能帮助我。 我试图在删除 (li) 后将一个元素 (li) 更改为另一个元素 (div)。 示例代码: $("#inputEl>li").draggable({
我正在尝试使用 jquery ui Draggable/droppable 拖放到文本区域中。我将文本区域设置为可放置。我能够在放置发生时触发事件,但我不知道如何准确确定“放置”发生在文本区域中的哪个
当我拖放到某个 div 时,我想获得拖动的 id Drag drop here!! JQUER
我需要能够获取设置为可拖动的元素,并将该元素物理移动到容器中,而不是像当前功能那样仅覆盖它。 例如: $(function () { $(".image").dragg
我正在制作一个应用程序,它使用一个可放置的 div 和一些可拖动的 div 。如何使 droppable 不接受多个可拖动 div?我用 Google 搜索了,但没有找到任何解决方法。 我想到了一个解
我有一个 div,我可以将其拖动到其他 div,并且它工作正常。 但使用 helper: 'clone' 时,可以拖动 div,但 droppable 不起作用。 你知道如何解决这个问题吗? jque
那么如何限制 droppable 仅包含完整的draggable? 看看这个例子.. http://jsfiddle.net/jWNkh/1/ ..尝试将可拖动对象拖动到可放置对象,您将看到可放置对象
我正在为调查创建问题类型。 我正在使用下面的jsfiddle http://jsfiddle.net/hP3jc/ 我需要一个计数器或类似的东西,让我知道有多少红色 block 被丢弃到底部灰色 bl
我是一名优秀的程序员,十分优秀!