标签: jquery-ui-draggable

我正在使用.draggable(jQuery UI的一部分)来允许用户在简单的Web应用程序中移动项目.它适用于OSX和Windows的所有最新桌面浏览器(Windows Safari除外,它只会因某种原因垂直移动项目).

我遇到的主要问题是它不适用于Safari IOS(这是应用程序最初的目标).

这是不兼容的原因吗？

还有另一种方法可以达到同样的效果吗？

我正在运行它的测试网站是http://www.pudle.co.uk/mov/draggable.html,我也做了一个jsfiddle - http://jsfiddle.net/t9Ecz/.

任何帮助非常感谢,欢呼.

我实际上有两个问题,标题中的主要是主要问题.我在页面上有多个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时才会激活.

我希望有一个可排序的列表,但我也希望该列表中的元素可以放到我定义为droppable的div中.我似乎无法找到办法.有任何想法吗？

我有一个骨干视图模型,我在这里渲染,并使用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>

任何帮助是极大的赞赏.

我正在编写一个新的Web应用程序,需要支持页面上元素的拖放操作(而不是文件拖放).

这就是这个问题的答案

html5 vs jquery拖放

建议使用Modernizr检查浏览器是否支持HTML5拖放,并使用该支持或退回到jQuery UI之类的替代方案.

由于它们具有完全不同的模型,这意味着必须单独实现和测试所有拖放代码(非常少的共享实现).如果对HTML5拖放有重大的,对用户有影响的好处,并且如果回退到jQuery UI会提供降级的体验,那么这似乎是合乎逻辑的.

实施这两种变体是否有显着的好处？

我使用jQuery droppable(与jQuery draggable结合使用)允许用户通过从列表中拖动项目并将其放在表格上来向HTML表格添加行.

这很好用,但是目前的逻辑是,当用户在表行上拖放时,新行将被添加到他们放置的行的下方.

如果新行的添加位置基于用户是否放入现有行的上半部分或下半部分,那会更好.

这是很容易在计算drop事件,但我需要给UI反馈用户拖动(我会用两个CSS类的方式做droppable-above,并droppable-below举例).

这似乎不可能,因为over事件只发射一次; 当用户最初拖过可投放元素时.

是否有可能得到over火,每鼠标移动,而用户是在投掷的元素事件？

如果是这样,那么我就能做到这一点:

$("tr.droppable").droppable({
    over: function(event, ui) {
        if (/* mouse is in top half of row */) {
            $(this).addClass("droppable-above").removeClass("droppable-below");
        }
        else {
            $(this).removeClass("droppable-above").addClass("droppable-below");
        }
    },

    out: function(event, ui) {
        $(this).removeClass("droppable-above").removeClass("droppable-below");
    },

    drop: function(event, ui) {
        $(this).removeClass("droppable-above").removeClass("droppable-below");
        if (/* mouse is in top half of row */) {
            // Add new row above the dropped …

我在鼠标处于向下位置之前和释放之前创建一个新的jQuery元素.(在mousedown之后).

我想dragging使用jQuery UI 以编程方式触发新元素,以便它会自动开始拖动我的鼠标移动.我不想释放然后再次单击鼠标.

我试过以下......

var element = $("<div />");
element.appendTo("body").draggable().trigger("mousedown");

......但这不起作用.

有没有人对如何做到这一点有任何建议？

更新: 经过一番搜索,这个问题的海报有同样的问题.然而,建议的解决方案,归结为......

$("body").on("mousedown", function(e) { 
  $("<div />").draggable().appendTo("body").trigger(e);
});

...不再适用于最新版本的jQuery和jQuery-UI,而是生成最大调用堆栈超出错误.

使用jQuery UI,我试图创建一个带有两个可滚动容器的接口,每个容器包含许多可拖动元素.用户可以将元素从一个容器拖到另一个容器.

删除功能不是问题.删除后,元素将被分离并在其新父项下的正确位置重新创建.

我的问题是,当容器已position:relative;应用时,draggable元素无法显示在其容器外部,因此在拖动时,元素在移出容器边界时将消失.

此默认行为是有意义的,因为通常用户希望在其容器内拖动元素.作为一种解决方法,我假设解决方案是使用draggable属性'appendTo',我认为它会将元素移出容器外,但不幸的是,这似乎没有任何影响.

DOM :(每个视图都是可滚动的,每个容器都有位置:相对,并且可以保存所有元素所需的大小)

BODY
    VIEW 1
        CONTAINER
            DRAGGABLE ELEMENTS
    VIEW 2
        CONTAINER
            DRAGGABLE ELEMENTS

使用Javascript:

$('div.card').draggable({
    appendTo: 'body',
    scroll: false //stops scrolling container when moved outside boundaries
});

有关问题的简化说明,请参阅JSFiddle.我不想用可放置的代码来膨胀示例,所以这只是说明了拖动问题.http://jsfiddle.net/Em7Ak/

提前谢谢了.