jquery - 在 Jquery/HTML 上实现拖放功能

标签 jquery css drag-and-drop

我需要为我网站上的一个页面创建一个拖放功能,允许用户(一旦登录)将他们喜欢或收藏的图片拖到他们制作的“壁橱”中。 我一直在尝试 Jquery draggable,但这不是我想要的工作方式。

这基本上就像您尝试将文件拖到回收站中一样。

  • 我希望图像在我放入垃圾箱后消失。
  • 我希望系统知道我在其中放入了多少张图片。

这方面的基本方法是什么?我已经动态拉取了我的图片(当用户“喜欢”图片时,它会在壁橱页面中弹出)。我所需要的只是让这个拖放功能正常工作。

最佳答案

你需要的是将你的可拖动对象配置为恢复无效并且你的可放置对象只接受一个可拖动对象然后在放置时你可以执行一个函数并做任何你想做的事情,

<div id="my-draggable"></div>


<div id="my-droppable"></div> 
<script>
    $("#my-draggable").draggable({ revert: "invalid" });
    $("#my-droppable").droppable({ 
        accept: "#my-draggable",
        drop: function( event, ui ) {
            //do whatever you want in here
        } 
});

关于jquery - 在 Jquery/HTML 上实现拖放功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26999790/

相关文章:

jquery - 添加新的 Formelemts 并使用 jqtransform 对其进行转换

jquery - 将类添加到 jquery 对话框按钮

jquery - 如何使幻灯片相互显示

css - 为什么左侧菜单中的最后 3 个 <a> 没有填充它们包含的 <li>?

html - 我可以使用图像作为 mask 吗?

winapi - 对话框可以拦截传递给其控件的拖放消息吗?

javascript - angularjs 拖放插件掉落问题

javascript - 提交表单时使用 jquery 保存和检索窗口滚动位置的最佳方法

javascript - 如何在网站上实现 "drag n drop"用户界面?

javascript - 知道何时在 jQuery UI 中触发位置碰撞