我如何在div的一部分上使用Draggable

本文介绍了我如何在div的一部分上使用Draggable的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

你好！ 我在包含2个其他div对象的div上使用了draggable.

< div id =" MustBeSolvedByRoot" 类 =" DialogRoot ui-draggable" 样式 =" 宽度:610像素；高度:20px；位置:绝对；顶部:0px；左侧:5px；可见性:可见；" > < div id =" MustBeSolvedHeader" > < 标题 高度 20 > < /div > < div id =" MustBeSolvedContent" > < 内容 高度 600 > < /div > < /div > $('#MustBeSolvedByGroupRoot').draggable({contains:"#root"，scroll:false});

我只希望能够在按下root/Header div而不是内容div时拖动div(我在那里有滚动条，并且div被拖动，然后我尝试拖动滚动条)，所以它的作用就像一个对话框(我不知道)不想使用jquery对话框).有可能这样做吗?

解决方案

('#MustBeSolvedByGroupRoot').draggable({containing:"#root"，scroll:false});

我只希望能够在按下root/Header div而不是内容div时拖动div(我在那里有滚动条，并且div被拖动，然后我尝试拖动滚动条)，所以它的作用就像一个对话框(我不知道)不想使用jquery对话框).有可能这样做吗? 谢谢！

我找到了解决方案，我在div标头中添加了一个句柄.

(``#DivRoot'').draggable({包含:"#root"，滚动:false，句柄:"#DivHeader"});

Hello! I have used draggable on a div that contains 2 other div objects.

<div id="MustBeSolvedByRoot" class="DialogRoot ui-draggable" style="width: 610px; height: 20px; position: absolute; top: 0px; left: 5px; visibility: visible;"> <div id="MustBeSolvedHeader"><header height 20></div> <div id="MustBeSolvedContent"><content height 600></div> </div> $('#MustBeSolvedByGroupRoot').draggable({ containment: "#root", scroll: false });

I only want to be able to drag the div when pressing the root/Header div and not the content div (i have scrollbar there and the div is dragged then i try to drag the scrollbar) so it acts like a dialog (i don''t want to use the jquery dialog). Is it possible to do this? Thanks!

解决方案

('#MustBeSolvedByGroupRoot').draggable({ containment: "#root", scroll: false });

I only want to be able to drag the div when pressing the root/Header div and not the content div (i have scrollbar there and the div is dragged then i try to drag the scrollbar) so it acts like a dialog (i don''t want to use the jquery dialog). Is it possible to do this? Thanks!

I found a solution for this, i added a handle to the div header.

(''#DivRoot'').draggable({ containment: "#root", scroll: false, handle: "#DivHeader" });