Checking if the DOM element is being dragged and the value of the JavaScript variable is set?

Question

What is the most efficient way to create a JavaScript variable equal to the "drag and drop" state of a DOM element through jQuery?

I tried the following:

$(document).ready(function() { $('#editButton').click(function() { var isDraggable = $('.tile').draggable('option', 'disabled'); if(isDraggable == "true") { $(function() { $('.tile').draggable({ containment: '#content', scroll: false }); $('.tile').resizable({ maxHeight: 200, maxWidth: 200, minHeight: 100, minWidth: 100 }); }) } }) }); 

I did not get any syntax errors or anything else, but the functionality was not there.

Here is the accompanying HTML:

 <div id="content"> <div id="navBar"> <input type="button" id="editButton" value="Edit" /> </div> <ul> <li> <div id ="google" class="tile"> <img src="images/tiles/google/google.png" class="tile_image" width="27" height="41" /> <p>Google</p> </div> </li> <li> <div id="yahoo" class="tile"> <p>Yahoo</p> </div> </li> <li> <div id="thelockpeople" class="tile"> <p>The Lock People</p> </div> </li> <li> <div id="amazon" class="tile"> <p>Amazon</p> </div> </li> <li> <div id="masterlock" class="tile"> <p>Masterlock</p> </div> </li> <li> <div id="hpionline" class="tile"> <p>Hpionline</p> </div> </li> <li> <div id="youtube" class="tile"> <p>YouTube</p> </div> </li> <li> <div id="kitco" class="tile"> <p>Kitco</p> </div> </li> <li> <div id="usatoday" class="tile"> <p>USA Today</p> </div> </li> <li> <div id="gamefly" class="tile"> <p>GameFly</p> </div> </li> </ul> </div> 

What am I doing wrong?

Answer 1

To make it work, just replace the line that says:

 if(isDraggable == "true") 

with:

 if (isDraggable) 

The reason is that isDraggable is an object, if it exists (i.e. the “drag and drop” method in the “.title” div worked), then it will be true (exists and is not non-zero), but it will not be 1 , which is a numeric value for true , so the original test failed and you never call this function.