CODEWITHSUNDEEP
phpjqueryhtmldialogdraggable
user1219572
user1219572

Reputation: 2385

Why are my dialogs not draggable in jQuery?

I've created a dialog in jQuery but they are not draggable even though i've set 'draggable: true'. Can anyone see what's wrong?

HTML:

<div class="lessonDetails">
    <a href="#popUpLink" class="popUpLink">Lesson Details</a>
    <div class="popUpDialog" title="Lesson Details">
       <p>'.$l['name'].'</p>
       <p><a href="">Resources and Objectives</a></p>
    </div>
</div>

JS:

$('.popUpLink').each(function()
{
    $divDialog = $(this).next('.popUpDialog');
    $.data(this, 'dialog', $divDialog.dialog(
    {
        autoOpen: false,
        modal: true,
        title: $divDialog.attr('title')
        //draggable: true   
    }));
}).click(function()
{
    $.data(this, 'dialog').dialog('open');
    return false;
});

Upvotes: 0

Views: 681

Answers (2)

Manse
Manse

Reputation: 38147

You don't need to include the draggable:true as its the default value ..

But you do need to include 2 additional libraries to make draggable work:

<script src="pathto/ui/jquery.ui.mouse.js"></script>
<script src="pathto/ui/jquery.ui.draggable.js"></script>

Have a look at the dependencies section on the docs

When you download the jQuery UI Libraries you have to select which "modules" you require - your need to select the ones above or better still reference the complete jQuery UI library using Googles CDN

Upvotes: 1

Andrew Hall
Andrew Hall

Reputation: 3073

Youve missed a comma after:

title: $divDialog.attr('title')

You could have probably seen this in a javascript console or debugger

Upvotes: 0

Related Questions