可选&可拖动 jQuery 来制作类似 Windows 资源管理器的窗口
我现在面临着另一件事，我不知道该怎么做。
我是 jQuery 新手，我正在尝试使图标可拖动，当您将其放入文件夹（.folder div）时，它将被移动到那里。
- 拖动图标 （我知道如何拖动它，但它仅在父 div 中可见，而不是在整个网页上可见。）
- 将其放在 #navbar 上的文件夹上（左侧） （同样，我不知道如何使其可放置在特定的 div 上）
- 删除在原始内容上移动的 div 并重新对齐所有其他 div
- 调用 php 页面将与此 div 关联的文件移动到所选目录
div 上页面的中心（我希望它们可拖动）是图标，当您拖动它们然后将它们放在左侧的文件夹上时，它将被移动到那里。
在这里您可以看到它的样子（使用 Firefox 效果更好）：http://narks.xtreemhost.com/
这只是一个向您展示的测试页。有人可以帮我吗？
要了解网页的结构，请参阅 CSS 布局中的 Windows 7 资源管理器（再次感谢 Ivan Ivanić 的宝贵帮助1)
编辑 jQuery Drag &掉落：
$( "div.explorer_icon" ).draggable({
opacity: 0.50,
revert: true,
distance: 30,
zIndex: 9999,
scroll: false,
appendTo: 'body',
containment: 'window',
helper: 'clone'
});
$( "#navbar div.item_list" ).droppable({
accept: '.explorer_icon',
hoverClass: 'item_list_hover',
tolerance: 'pointer',
drop: function(event, ui) {
}
});
I'm now facing another thing that I can't figure out how to do.
I'm new to jQuery and I'm trying to make an icon draggable and when you drop it in the folder(.folder div) It will be moved there.
- Drag the icon
(I know how to drag it but it is only visible in the parent div and not on the entire webpage.) - Drop on a folder on the #navbar (at the left)
(Again, I can't figure out how to make it droppable over a specific div) - Remove the div moved on the original content and realign all other div
- Call a php page to move the file associated with this div to the selected directory
div on the center of the page (I want them draggable) are icons, when you drag them and then drop them on a folder on the left, it will be moved there.
Here you can see what it looks like (Better using Firefox) : http://narks.xtreemhost.com/
This is only a test page to show you. Anyone can help me with that please?
To know the structure of the webpage, see Windows 7 explorer in CSS layout (Thanks again to Ivan Ivanić for his precious help1)
EDIT jQuery Drag & Drop :
$( "div.explorer_icon" ).draggable({
opacity: 0.50,
revert: true,
distance: 30,
zIndex: 9999,
scroll: false,
appendTo: 'body',
containment: 'window',
helper: 'clone'
});
$( "#navbar div.item_list" ).droppable({
accept: '.explorer_icon',
hoverClass: 'item_list_hover',
tolerance: 'pointer',
drop: function(event, ui) {
}
});
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我强烈推荐jqueryui。演示在这里：http://jqueryui.com/demos/。请注意其 Selectable 和 Draggable 对象的链接。
此外，从对您的问题的快速扫描来看，似乎更具体的解决方案是我喜欢的可排序。这是带有列表混合的两个列表可排序： http://jqueryui.com/demos/sortable/ #connect-lists
更新：您还声明需要保留包含的 div 等。以下是关于可拖动边界的特定页面： http://jqueryui.com/demos/draggable/ #约束运动。一般来说，请注意右侧边栏上每个 jQueryUI 功能的不同示例的链接。它们代表了开箱即用的所有内容。如果您需要超越，请将您的实现发送给 jqueryUI 人员。谁知道呢，它可能会成为下一版本 jqueryUI 的下一个功能。
I'd highly recommend jqueryui. Demos here: http://jqueryui.com/demos/. Note the link to their Selectable and Draggable objects.
Additionally, from a quick scan of your problems, it looks like a more specific solution would be the Sortable, which I love. Here's the two-list sortable with list interminglings: http://jqueryui.com/demos/sortable/#connect-lists
Update: You also state that you need to leave the containing div and such. Here is the specific page on boundaries for draggable: http://jqueryui.com/demos/draggable/#constrain-movement. And in general, note the links to different examples on the right sidebar for each of the jQueryUI features. They represent everything that is available out of the box. If you need to go above and beyond, please send your implementation to the jqueryUI folks. Who knows, it might become the next feature of the next version of jqueryUI.