Question

我创建了一个弹出窗口（here）。

HTML：

<div id = "window">
    <div id = "title"> "some title"
    </div>  
    <div id = "innerDiv"> 
    </div>     
</div>

CSS：

#window
{
    height:200px;
    width:150px;
    border: 5px solid red; 
}

#innerDiv
{
    height:90%;
    width:100%;
    background-color: #00ff00; 
}

#title
{
    cursor:move;
    height:10%;
    width:100%;
    background-color: yellow; 
}

JQUERY：

$( document ).ready(function() {
    $('#title').draggable({appendTo:'div'});
});

我只想在拖动标题行时使这个窗口变成拖尾，但是现在我只能在其余窗口停留的标题行上拖动它。

我的问题是如何制作可拖动窗口而不仅仅是标题行？

Answer 1

要使window元素可拖动，只需更改：

   $('#title').draggable({appendTo:'div'});

为：

   $('#window').draggable();

http://jsfiddle.net/z6qabpLh/1/

要将title元素作为handle，您可以执行以下操作：

   $('#window').draggable({handle: "#title"});

Answer 2

$("#window").draggable({ handle: "#title" });

演示：http://jsfiddle.net/z6qabpLh/2/

使用draggable jQuery函数

2 个答案: