标签: jquery-ui-droppable

当我制作一个可拖动的克隆并将其放入一个droppable时,我无法再拖动它.我怎么做？其次,我只能弄清楚如何.append将克隆添加到droppable中.但是它会在任何现有元素之后捕捉到左上角而不是掉落位置.

$(document).ready(function() {
    $("#container").droppable({
        drop: function(event, ui) {
            $(this).append($(ui.draggable).clone());
        }
    });
    $(".product").draggable({
        helper: 'clone'
    });
});
</script>

<div id="container">
</div>
<div id="products">
    <img id="productid_1" src="images/pic1.jpg" class="product" alt="" title="" />
    <img id="productid_2" src="images/pic2.jpg" class="product" alt="" title="" />
    <img id="productid_3" src="images/pic3.jpg" class="product" alt="" title="" />
</div>

一个小问题希望通过一个简单的答案,我使用jQuery draggable和droppable将项目放入Dock.使用以下代码进行删除.

$("#dock").droppable({
            drop: function(event, ui) {
                //Do something to the element dropped?!?
            }
        });

但是我找不到一种方法来获取实际丢弃的元素,所以我可以做一些事情.这可能吗？

我想使用jquery draggable/droppable让用户选择一组对象(每个对象在角落都有一个复选框),然后将所有选定对象作为一个组拖动...

我无法弄清楚我的生活怎么做哈哈.

以下是我想要在每个可拖动对象上创建可用解决方案的内容,使用start()事件并以某种方式获取所有其他选定对象并将其添加到选择中

出于性能原因,我还在考虑让拖动的物体看起来像一组物体(它们是图像,所以可能是一堆照片).我认为如果你一次拖动几十个对象,使用可拖动功能可能会失败,这听起来更好吗？

问题

我在将元素拖到可伸缩的div容器上时遇到了一个小问题.

一旦元素实际上在容器中,元素就会拖动并按照预期的方式工作.

拖动到可伸缩容器上的较大元素没有太多问题.

但是当拖动较小的元素时,您可以看到鼠标不再附加到所述元素上,当它被丢弃时,它会在它应该下降的地方稍微下降.

我正在尝试找到一个解决方案,我的鼠标停留在元素上,它会掉落到应该放下的位置.

我已经一点一点地解决了问题,你可以在下面看到,但这是让我疯狂的最后一块拼图.如果有人伸出援助之手的时候,这将是极大的赞赏.

这是一个codepen - 单击并将两个蓝色元素拖到白色容器上以试用它

Codepen

全屏视图

行动中的短GIF

这将有助于确保可放置区域与缩放容器一起使用.

$.ui.ddmanager.prepareOffsets = function(t, event) {
  var i, j, m = $.ui.ddmanager.droppables[t.options.scope] || [],
    type = event ? event.type : null,
    list = (t.currentItem || t.element).find(":data(ui-droppable)").addBack();
  droppablesLoop: for (i = 0; i < m.length; i++) {
    if (m[i].options.disabled || (t && !m[i].accept.call(m[i].element[0], (t.currentItem || t.element)))) {
      continue;
    }
    for (j = 0; j < list.length; j++) {
      if (list[j] === m[i].element[0]) {
        m[i].proportions().height = 0; …

如果在另一个问题中回答这个问题,我很抱歉,我无法找到特定于我的问题的答案!

我正在尝试测试jQuery draggable是否被放弃在合法的dropable之外.这通常会在90%的时间内通过恢复可拖动来解决,但我不想这样做.相反,我想做一件事,如果draggable被放到droppable(工作得很好!),以及其他东西,如果它被丢弃到所有可能的droppables之外(目前让我变得更好!).

简而言之:

jQuery('#droppable').droppable(
{
    accept: '#draggable',
    drop: function(event, ui)
    {
        // awesome code that works and handles successful drops...
    }
});

jQuery('#draggable').draggable(
{
    revert: false,
    stop: function()
    {
        // need some way to check to see if this draggable has been dropped
        // successfully or not on an appropriate droppable...
        // I wish I could comment out my headache here like this too...
    }
});

我觉得我错过了一些非常明显的东西...提前感谢任何帮助!

这是一种情况,我希望有人回复告诉我,我是个白痴.但我仍然惊讶于jQueryUI drag\drop不适用于触控设备.我没有测试过它们,但是我在去年尝试了iphone\ipad\android 2,3和4而没有.刚在新的Android上试过最新版本.依然没有.不要相信我,只需访问移动设备上的演示页面并尝试使用drag\drop示例.没有.

这里有技术问题或核心不兼容吗？一个修复如此简单,不值得写？jQuery开发人员不使用移动设备吗？我已经看到Stack Overflow附近发布了"修复",但它们都是"黑客",所有我试过的都不起作用.

我很困惑.有人能解释一下这个问题吗？

我实际上有两个问题,标题中的主要是主要问题.我在页面上有多个div元素标记为droppable.在这些div元素中,我有标记为可拖动的跨度.我想要它,所以当你拖动一个元素时,它会悬停在一个可放置的区域上,该区域要么突出显示,要么有边框,这样他们就知道可以将它放在那里.

作为次要问题,我的所有可拖动元素都有一个显示:块,宽度和浮动,所以它们在我的可放置区域看起来很漂亮.当物品掉落时,他们似乎得到了一个位置设置,因为它们不再像我的其他物品一样漂亮漂亮.供参考,这是我的javascript.

$('.drag_span').draggable({
    revert: true
});
$('.drop_div').droppable({
    drop: handle_drop_patient
});

function handle_drop_patient(event, ui) {
    $(this).append($(ui.draggable).clone());
    $(ui.draggable).remove();
}

我有一个可拖动的元素和一个可以放置的元素.在dropzone上删除拖动项后,我试图执行以下jquery伪代码:

if(draggedelement == value){

$(draggedelement).hide();

}
else{

$(draggedelement).revert();

}

其中revert()功能移动拖动的项目回原来现在的位置.

如何实现这一目标？

PS我知道可拖动的'revert'选项,但是只有当被拖动的项目没有进入dropzone时才会激活.

我有一个骨干视图模型,我在这里渲染,并使用jquery ui使其可拖动.

render: ->
$(this.el).attr('class', 'item').html(this.template(this.options.model.toJSON() ))
viewmodel = this
$(this.el).draggable
    revert: true
    drag: () ->
        console.log(viewmodel)

上面,我有viewmodel可用,可以从dom中删除它,在模型上调用方法等等.但我想要的是将这个视图模型拖入一个可放置的容器 - 就像一个垃圾桶 - 然后调用一些视图模型的方法并将其从DOM中删除.

我看到的是,当一个项目被放入容器时的回调方法是:

$(function() {
    $("#trash").droppable({
        drop: function(event, ui) {
          console.log(ui.draggable);
        }
    });
});

所以,我能够看到ui.draggable并从DOM中删除它,但我没有参考它的视图模型.难道我做错了什么？有办法解决这个问题吗？

我正在尝试开发一个具有以下功能的小页面:

1. 页面将有两个div:一个是#origin,包含很多缩略图,第二个是#drop,可以放下图像(最多只有3个).
2. 需要可以将图像从#drop拖放回原点.
3. #drop需要是可排序的,因为3个所选图像的顺序很重要.
4. 当放在#drop上时,图像应该对齐,就好像它们从一开始就显示原始图像一样.

我之前从未使用过jQuery,之前我甚至有一个工作页面原型,我已经通过本机HTML5拖放事件在两个容器之间进行了拖放,但是当我将sortable()jquery功能添加到#drop时,图像无法再被拖回#origin,这会破坏我的功能.

所以,我重新开始并希望实现拖放功能以及使用jQuery进行排序.我已经阅读了所有可拖动,可放置和可排序功能的完整API,但是我无法让它工作.不确定这是我用于每个功能的设置.

在小提琴上,您可以看到图像变得可拖动,我可以看到我指定的设置(不透明度,光标),但图像不能放在#drop上.

根据我的理解,使图像可拖动,图像具有"可拖动"类,以及使用".draggable"接受#drop droppable的组合,它应该允许最基本的功能,但即使这样也不会采取.另外我读到如果draggable和droppable都具有相同的"范围"设置,它也应该工作,但事实并非如此.

这是页面代码的简单版本,加上jsFiddle:http://jsfiddle.net/39khs/

码:

CSS:

#origin {
  background-color: green;
}
#drop {
  background-color: red;
  min-height: 120px;
}

JS:

$("img").draggable({ helper: "clone", opacity: 0.5, cursor: "crosshair", scope: "drop" });
$("#drop").droppable({ accept: ".draggable", scope: "drop"});
$("#drop").sortable();

HTML:

<div id="wrapper">
    <div id="origin" class="fbox">
        <img src="http://placehold.it/140x100" id="one" title="one" class="draggable" />
        <img src="http://placehold.it/140x100" id="two" title="two" class="draggable" />
        <img src="http://placehold.it/140x100" id="three" title="three" class="draggable" />
    </div>
  <p>test</p>
    <div id="drop" class="fbox">

    </div>
</div>

任何帮助是极大的赞赏.