标签: draggable

make bootstrap twitter dialog modal draggable

我正在尝试用这个jquery插件制作bootstrap twitter对话模式draggable:

http://threedubmedia.com/code/event/drag#demos

但它不起作用.

var $div = $('html');
console.debug($('.drag'));
$('#modalTest')
    .drag("start", function(ev, dd) {
        dd.limit = $div.offset();
        dd.limit.bottom = dd.limit.top + $div.outerHeight() - $(this).outerHeight();
        dd.limit.right = dd.limit.left + $div.outerWidth() - $(this).outerWidth();
    })
    .drag(function(ev, dd) {
        $(this).css({
            top: Math.min(dd.limit.bottom, Math.max(dd.limit.top, dd.offsetY))
            , left: Math.min(dd.limit.right, Math.max(dd.limit.left, dd.offsetX))
        });
    }); 
Run Code Online (Sandbox Code Playgroud)

你知道我该怎么办?

jquery modal-dialog draggable twitter-bootstrap

45
推荐指数
6
解决办法
9万
查看次数

jQuery拖放使用直播活动

我有一个应用程序,其中包含经常更改的长列表,我需要该列表中的项目可拖动.

我一直在使用jQuery UI draggable插件,但添加到400多个列表项很慢,每次添加新列表项时都必须重新添加.

有没有人知道一个类似于使用jQuery 1.3 .live()事件的jQuery UI draggable插件的插件?这将解决这两个问题.

jquery drag-and-drop jquery-ui draggable livequery

41
推荐指数
4
解决办法
4万
查看次数

如何在matplotlib中创建一个可拖动的图例?

我在matplotlib中的轴对象上绘制了一个图例,但声称将其置于智能位置的默认定位似乎不起作用.理想情况下,我希望用户可以拖动图例.如何才能做到这一点?

python matplotlib legend draggable

40
推荐指数
3
解决办法
9245
查看次数

在可拖动元素上设置z-index

我试图使用jQuery在可拖动元素上设置z-index.你可以看到我在说什么,到目前为止我在这里:

http://jsfiddle.net/sushik/LQ4JT/1/

这是非常原始的,它有问题.关于我如何使最后点击的元素具有最高的z-index而不是将所有其余部分重置为基础的任何想法z-index,让它们步进,所以第二个到最后点击具有第二个最高z-index等等.

我遇到的另一个问题是它只适用于完整点击事件,但可拖动功能通过点击和按住来工作.如何在初始点击时应用该类,而不是等待释放点击的事件?

css jquery jquery-ui z-index draggable

33
推荐指数
4
解决办法
6万
查看次数

HTML5,JavaScript:从外部窗口拖放文件(Windows资源管理器)

我可以请一个HTML5文件拖放实现的好例子吗?如果从外部应用程序(Windows资源管理器)到浏览器窗口执行拖放操作,源代码应该有效.它应该在尽可能多的浏览器上工作.

我想问一个有很好解释的示例代码.我不想使用第三方库,因为我需要根据我的需要修改代码.代码应基于HTML5和JavaScript.我不想使用JQuery.

我花了一整天寻找好的材料来源,但令人惊讶的是,我没有找到任何好的东西.我发现的示例适用于Mozilla,但不适用于Chrome.

javascript html5 drag-and-drop draggable

32
推荐指数
4
解决办法
6万
查看次数

jQuery UI Draggable无法在ios设备上运行

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

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

这是不兼容的原因吗?

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

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

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

jquery jquery-ui draggable jquery-ui-draggable

31
推荐指数
2
解决办法
4万
查看次数

如何检查元素是否可以放置,可拖动或其他"ble"?

我有一堆jQuery元素.有些是可拖动的,有些是可以放置的,有些是可以拖放的.如何检测元素是否可拖动或可拖放?

jquery jquery-ui droppable draggable jquery-data

30
推荐指数
3
解决办法
2万
查看次数

jQuery draggable + droppable:如何将drop元素捕捉到drop-on元素

我的屏幕分为两个DIV.在左边DIV我有几个50x50像素DIVs,在右边DIV我有一个80x80 LI秒的空网格.DIV左边的s是可拖动的,一旦落在a上LI,它们应该对齐到中心LI.

听起来很简单吧?我只是不知道如何完成这件事.我尝试通过操纵已删除DIVtopleftCSS属性来匹配LI它们被放入的属性,但是lefttop属性是相对于左边的DIV.

我怎样才能最好地将掉落的元素捕捉到它所放入的元素的中心?这一定很简单吧?

编辑:我正在使用jQuery UI 1.7.2和jQuery 1.3.2.

编辑2:对于其他有这个问题的人,这是我修复它的方法:

我使用Keith的解决方案来删除拖动的元素并将其放置drop在droppable插件的回调中的drop-on元素中:

function gallerySnap(droppedOn, droppedElement)
{
    $(droppedOn).html('<div class="drop_styles">'+$(droppedElement).html()+'</div>' );
    $(droppedElement).remove();
}
Run Code Online (Sandbox Code Playgroud)

我不会将被删除的元素再次拖动,但如果你这样做,只需将draggable再绑定到它.

对我来说,这个方法也解决了我在定位掉落的元素(相对于左边DIV)和在第二个内部滚动时遇到的问题DIV.(元素将保持固定在页面上,现在它们滚动).

我确实玩了快照选项,使其在拖动时看起来很好,所以感谢karim79的建议.

我可能不会用这个赢得任何Awesome Code奖品,所以如果你看到改进的空间,请分享!

jquery droppable draggable

29
推荐指数
3
解决办法
7万
查看次数

是否有一个结合了Draggable和Selectable的JQuery插件

我正在寻求实现一个带有许多项目的Web界面,这些项目可以被选中并拖动以定位它们,无论是成组还是单独.真的像Windows桌面.

我们已经使用了JQuery,因此添加它是首选.JQuery UI Draggables和Selectables分别完成了我们想要的大部分工作,但并没有真正协同工作来提供我们正在寻找的那种效果.

我完全被JQ插件网站所淹没(它的'流行'算法看起来并不是非常有用),并且欢迎指导这里避免大量轮子改造的最佳方法,因为我猜这个比喻有已经完成了.

html jquery draggable

28
推荐指数
2
解决办法
2万
查看次数

如何让HTML5中的<div> s可以为Firefox拖放?

我正在玩HTML5功能,我想要div(和文章,部分等类似的容器)可拖动.请考虑以下代码:

<!DOCTYPE html>
<html>
<head>
  <title>A Simple Draggable Object</title>
</head>

<body>
    <h1>Test #1: A Simple Draggable Object</h1>
    <div draggable="true">This text should be draggable.</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

我在OS X中测试了以下浏览器:在Chrome 7.0和Safari 5.0.2中,我可以成功拖动文本,但在Firefox 3.6和4.0b6中,我既不能拖动文本也不能标记它(就好像它是通常的文本一样).这是一个错误还是一个功能?我如何实现Firefox让我可以在使用jQuery的情况下拖拽这些标签?

firefox html5 draggable

27
推荐指数
1
解决办法
2万
查看次数