标签: draggable

我经常搜索一下jQuery的拖放教程(没有UI),但由于JQuery UI的普及,所有的拖放功能都基于JQuery UI.

任何人都可以给我一个提示如何通过JQuery独立进行基本的拖放操作？

我只是尝试将HTML5 draggable ='false'属性应用于某些图像,但它在Firefox浏览器中不起作用.在Chrome中工作正常但在Firefox上,选择了能够拖放的图像.示例代码可以在这里看到:

<div id="dnd">
    <textarea placeholder="drop here"></textarea>
    <img src="http://johnlewis.scene7.com/is/image/JohnLewis/231108668?$prod_main$" draggable='false'/>
</div>

的jsfiddle

我有Firefox最新版本:32.0.3

谷歌很多,但没有找到更好的解决方案.有没有使用JavaScript的解决方案？任何帮助,将不胜感激.

谢谢

我们正在使用Draggable JQuery UI插件,需要禁止在我们的元素之间重叠.我们自己可以编写一些碰撞检测,但更喜欢使用经过测试的包.有什么建议？

我正在寻找一种易于使用的方法,将拖动行为分配给画布中的多个对象(图像,形状等).有没有人有一个好方法或知道任何库拖动对象？谢谢

是否可以用另一个元素开始拖动？

例如:http://jsbin.com/igohod/edit#preview

我想#ct点击它时开始拖动#icon.值得注意的是,#icon它不是来自#ctDOM树.

HTML

  <div style="position:absolute; top:20px; left:10px;">
    <div id="icon">Icon</div>
  </div>

  <div style="position:absolute; top:20px; right:10px;">
    <div id="ct">start this drag when you drag the icon</div>
  </div>

JS

$(document).ready(function()
{
  // $('#icon').draggable();
  $('#ct').draggable();
});

更新:
可排序的http://jsbin.com/igohod/8/edit#preview的新示例

解决方案
http://jsbin.com/igohod/13/edit#preview

今天早上我遇到了jQuery draggable的奇怪问题,我想知道是否有其他人遇到过这个问题.

我在一个大div里面有很多小div.它们绝对定位:CSS中的"position:absolute"为其类,实际位置本身在JS中按需计算和设置.

现在我添加了允许这些div可拖动的功能.

但是,只要我制作一个可拖动的,就会直接在元素上给出"position:relative",正如您可能想象的那样,会严重影响屏幕上的位置.

有谁知道为什么它改变这样的"位置"或如何告诉它不？

编辑:

刚刚意识到有一个相当明显的答案盯着我的脸 - 对我的立场很重要:绝对!这似乎解决了这个问题.但是我仍然感兴趣,如果有人知道为什么它设置"位置:相对"这样(并且不能使其可配置或首先检查它是否需要位置)...我想知道我刚存储了什么问题为我自己;-)

我有一个无序列表:

• 清单项目1
• 清单项目2
• 清单项目3
• 清单项目4
• 清单项目5

使用此代码实现:

<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
  <li>List item 5</li>
</ul>

现在,我希望它可以拖延.例如,如果我向上拖动"列表项目5",我可以将它放在"列表项目2"和"列表项目3"之间,它将成为第三个.

我想在没有jQuery的情况下这样做,只需简单的Javascript.另外,我想使用原生HTML5 draggable ="true".任何帮助,将不胜感激.

有没有人想出如何使用适用于iOS的新版Google Maps SDK实现可拖动标记？API尚未本机提供.功能请求已提交.

如果我能掌握GMSMarker的基础视图,我可以拦截Touch事件.有人试过吗？

我正在试图弄清楚如何使动态创建的div可拖动,所以我创建了这个非常简单的东西来帮助我.我知道我必须使用非动态处理程序的on()事件.通过让body元素处理链接的JSfiddle中的克隆事件,我成功地使动态创建的div克隆,但它们不可拖动.我究竟做错了什么？

提前感谢您的帮助!

$(document).ready(function () {
    $("body").on('click', '.pink', function () {
        $('.container').append($("<div class='bl pink'></div>"))
    });
    $("body").on('click', '.blue', function () {
        $('.container').append($("<div class='bl blue'></div>"))
    });
    $("body").on('click', '.coral', function () {
        $('.container').append($("<div class='bl coral'></div>"))
    });
    $(".draggable").draggable();
});

当开始使用HTML5 draggable属性拖动元素时,原始元素仍然可见,因此我最终得到两个可见的元素而不是一个.

如何只拖动可见的元素(原始元素应暂时隐藏).

<script>
  function startDrag() {
    // hide initial element
  }

  function endDrag() {
    // reset initial element
  }
</script>

<div class="draggable" draggable="true"
  ondragstart="startDrag(event)"
  ondragend="endDrag(event)"
></div>

这是一个显示问题的jsfiddle https://jsfiddle.net/gjc5p4qp/