CODEWITHSUNDEEP
javascriptjquery
Michael
Michael

Reputation: 13616

Using draggable jQuery function

I create a popup window(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'});
});

I want to make this window draggale only when I drag a title line but, now I can dragg only the title line the rest window is staying on his place.

My question is how can I make draggable window not only the title line?

Upvotes: 1

Views: 52

Answers (2)

Darren
Darren

Reputation: 70718

To make the window element draggable, simply change:

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

to:

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

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

To have the title element as the handle then you can do:

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

Upvotes: 1

Oleksandr T.
Oleksandr T.

Reputation: 77482

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

Demo: http://jsfiddle.net/z6qabpLh/2/

Upvotes: 1

Related Questions