我正在尝试用这个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 UI draggable插件,但添加到400多个列表项很慢,每次添加新列表项时都必须重新添加.
有没有人知道一个类似于使用jQuery 1.3 .live()事件的jQuery UI draggable插件的插件?这将解决这两个问题.
我在matplotlib中的轴对象上绘制了一个图例,但声称将其置于智能位置的默认定位似乎不起作用.理想情况下,我希望用户可以拖动图例.如何才能做到这一点?
我试图使用jQuery在可拖动元素上设置z-index.你可以看到我在说什么,到目前为止我在这里:
http://jsfiddle.net/sushik/LQ4JT/1/
这是非常原始的,它有问题.关于我如何使最后点击的元素具有最高的z-index而不是将所有其余部分重置为基础的任何想法z-index,让它们步进,所以第二个到最后点击具有第二个最高z-index等等.
我遇到的另一个问题是它只适用于完整点击事件,但可拖动功能通过点击和按住来工作.如何在初始点击时应用该类,而不是等待释放点击的事件?
我可以请一个HTML5文件拖放实现的好例子吗?如果从外部应用程序(Windows资源管理器)到浏览器窗口执行拖放操作,源代码应该有效.它应该在尽可能多的浏览器上工作.
我想问一个有很好解释的示例代码.我不想使用第三方库,因为我需要根据我的需要修改代码.代码应基于HTML5和JavaScript.我不想使用JQuery.
我花了一整天寻找好的材料来源,但令人惊讶的是,我没有找到任何好的东西.我发现的示例适用于Mozilla,但不适用于Chrome.
我正在使用.draggable(jQuery UI的一部分)来允许用户在简单的Web应用程序中移动项目.它适用于OSX和Windows的所有最新桌面浏览器(Windows Safari除外,它只会因某种原因垂直移动项目).
我遇到的主要问题是它不适用于Safari IOS(这是应用程序最初的目标).
这是不兼容的原因吗?
还有另一种方法可以达到同样的效果吗?
我正在运行它的测试网站是http://www.pudle.co.uk/mov/draggable.html,我也做了一个jsfiddle - http://jsfiddle.net/t9Ecz/.
任何帮助非常感谢,欢呼.
我有一堆jQuery元素.有些是可拖动的,有些是可以放置的,有些是可以拖放的.如何检测元素是否可拖动或可拖放?
我的屏幕分为两个DIV.在左边DIV我有几个50x50像素DIVs,在右边DIV我有一个80x80 LI秒的空网格.DIV左边的s是可拖动的,一旦落在a上LI,它们应该对齐到中心LI.
听起来很简单吧?我只是不知道如何完成这件事.我尝试通过操纵已删除DIV的top和leftCSS属性来匹配LI它们被放入的属性,但是left和top属性是相对于左边的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奖品,所以如果你看到改进的空间,请分享!
我正在寻求实现一个带有许多项目的Web界面,这些项目可以被选中并拖动以定位它们,无论是成组还是单独.真的像Windows桌面.
我们已经使用了JQuery,因此添加它是首选.JQuery UI Draggables和Selectables分别完成了我们想要的大部分工作,但并没有真正协同工作来提供我们正在寻找的那种效果.
我完全被JQ插件网站所淹没(它的'流行'算法看起来并不是非常有用),并且欢迎指导这里避免大量轮子改造的最佳方法,因为我猜这个比喻有已经完成了.
我正在玩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的情况下拖拽这些标签?
draggable ×10
jquery ×7
jquery-ui ×4
droppable ×2
html5 ×2
css ×1
firefox ×1
html ×1
javascript ×1
jquery-data ×1
legend ×1
livequery ×1
matplotlib ×1
modal-dialog ×1
python ×1
z-index ×1