可移动的 div 但只有 div 标题才能移动所有 div 内容

Posted 2023-05-08

【中文标题】可移动的 div 但只有 div 标题才能移动所有 div 内容

【英文标题】：Moveable div but only div header to move all of div content

【发布时间】：2014-02-04 19:12:43

【问题描述】：

我想让应用看起来像 Windows 资源管理器。我正在搜索构建应用程序所需的内容。

可拖动 ajax 请求 等

对于 ajax，我找到了。它也可以工作。 但我对 jquery 可移动 div 有疑问（我是从 csstrick 中找到的） 你可以看到我用这个link从codepen做了什么

我的问题是： 如何创建jquery可移动但只有标题可以移动整个div。？ 请不要建议我使用 jquery ui 或 jquery easy ui。我只想从 0 开始构建我的应用程序，而不是使用像 ui/easyui 这样的现成框架。 我不太了解 jquery/javascript。但是有了这个应用程序，我想知道为什么我不使用 ui/easyui。

如果您有链接/谷歌建议关键字，请告诉我。 对不起我的语法或语言。

感谢您的建议。

编辑 1：

假设虚拟代码是这样的。

<div class="move">
<div class="title">This is title</div>
<div class="content"></div>
</div>

如果我使用 csstrick 中的代码，就像我在 codepen 中的示例中所做的那样。我可以在move 区域移动 div。但我想要的是我可以从.title 移动move div。

编辑 2。 这个LINK 是原始csstrick 脚本

编辑 3.

我找到了我想要的。

Draggable div without jQuery UI

【问题讨论】：

如果你不想使用jQuery UI，至少要研究一下你感兴趣的插件的源代码，以了解它们是如何工作的。

我从 csstrick 仔细阅读了代码，但我对 jquery/javascript 真的一无所知。所以我需要更多的例子。

【参考方案1】：

仔细查看您的代码：

opt = $.extend(handle:"",, opt);
    //if handle is empty drag by its container, else with the handle element
    if(opt.handle === "") 
        var $el = this;
     else 
        var $el = this.find(opt.handle);
    

如您所见，您可以指定一个selector 来处理拖动，只需要传递您的标题选择器。

$('.widget').drags(handle:".title");

更新了你的笔：codepen.io/anon/pen/sdBwo

【讨论】：

哇。谢谢。我在这里学到了一些新东西。谢谢你的解释。下次我会更仔细地阅读代码。