ansaurus

Question

Very simple jquery ui drag and drop does not drop.

Answer 1

A:

draggable makes the contents of your selector draggable, not the selector itself. Your divs are blank. Add something in there and those elements will becomes draggable.

PS: You should be a little more verbose in your question. Don't say "Why doesn't it work?". Ask why specific things don't work.

psychotik 2010-03-12 03:03:26

Good point. It drags, but it doesn't drop.

Catfish 2010-03-12 04:08:41

Answer 2

+1 A:

You have 3 issues happening.

The javascript include for jQuery should be javascript instead of ecmascript:

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;

The .active class won't override #drag (because it's less specific) you need to change the CSS to:

#drop.active { background:#FFCC33; }

And in jQuery don't use the . when using the addClass() method, just use the class name:

$(this).addClass('active');

Here's your source with those changes, this should have the intended effect:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<style type="text/css">
#content {
    background:#CCCCCC;
    width:500px;
    height:500px;
}
#drop {
    height:200px;
    width:200px;
    background:#00FFFF;
    float:right;
}
#drag {
    background:#009966;
    width:100px;
    height:100px;
    float:left;
}
#drop.active { background:#FFCC33; }

</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"&gt;&lt;/script&gt;
<script type="text/javascript">
    $(document).ready(function() {

        $('#drag').draggable({
            containment: '#content',
            scrollSensitivity: 60,
            revert: true,
            cursor: 'move'
        });

        $('#drop').droppable({
            accept: '#drag',
            drop: function(event, ui) {
                $(this).addClass('active');
            }
        });

    });
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>


<body>

    <div id="content">
        <div id="drag">

        </div>
        <div id="drop">

        </div>

    </div>

</body>
</html>

Nick Craver 2010-03-12 03:07:09

Even though this is not what i was getting after, thank you for pointing out these errors. It helped resolve a piece of my issue

Catfish 2010-03-12 04:14:09

Answer 3

A:

It works. If you are wondering why it doesn't change the color, it's because the styles defined for #droppable take priority over active so the color wont change. Add a !important rule for the background color in active and it should work.

Chetan Sastry 2010-03-12 03:08:11

ansaurus

tags:

views:

answers:

Very simple jquery ui drag and drop does not drop.

related questions