Question

I was trying to learn jQuery drag and drop using the fiddle. Though I am new to jQuery, I am so confused with jQuery and jQuery UI. What else do I need to install?

I have installed jquery-1.6.3.js and jquery-ui.1.8.16.js. But it’s not running.

How can I make it run?

The code is:

<p class="section">Drag and Drop</p>
<script type="text/javascript" src="/js/jquery-1.6.3.js"></script>
<script type="text/javascript" src="/js/jquery-ui.1.8.16.js"></script>
<script type="text/javascript">
    $('#draggable li').draggable({
        revertDuration: 100,
        helper: function() {
            var selected = $('#draggable img.selected');

            if (selected.length === 0) {
                selected = $('img', $(this)).addClass('selected');
            }
            var container = $('<div class="image-group"/>');
            container.append(selected.clone());
            return container;
        },
        cursorAt: {
            left: 25,
            top: 25
        }
    });

    $('#trash').droppable({
        drop: function(event, ui) {
            var newItems = $(ui.helper).find('img').clone(false).removeClass('selected');
            $(this).append(newItems);
            $('#draggable img.selected').parent().remove();
        }
    });

    $('#draggable li').click(function(event) {
        if (event.ctrlKey) {
            $('img', $(this)).toggleClass('selected');
        }
    });
</script>

<style>
    body {
        font-family:"Trebuchet MS";
    }
    #draggable {
        margin:0;
        padding:10px;
        width:300px;
        list-style-type:none;
        background-color:#000;
    }
    li {
        display:inline;
    }
    img {
        border:5px solid white;
    }
    .image-group img {
        margin-right:5px;
    }
    #trash {
        margin-top:10px;
        width:200px;
        height:200px;
        border:1px dotted #000;
    }
    .selected {
        border-color:#aed0ea
    }
    #trash h4 {
        margin:0;
        padding:0 5px;
    }
    .ui-icon {
        display:inline-block;
    }
</style>

<ul id="draggable">
    <li><img src="http://lorempixel.com/output/nature-q-c-50-50-1.jpg" alt="" /></li>
    <li><img src="http://lorempixel.com/output/nature-q-c-50-50-2.jpg" alt="" /></li>
    <li><img src="http://lorempixel.com/output/nature-q-c-50-50-3.jpg" alt="" /></li>
    <li><img src="http://lorempixel.com/output/nature-q-c-50-50-4.jpg" alt="" /></li>
    <li><img src="http://lorempixel.com/output/nature-q-c-50-50-5.jpg" alt="" /></li>
    <li><img src="http://lorempixel.com/output/nature-q-c-50-50-6.jpg" alt="" /></li>
</ul>
<p>Single left click+drag or Ctrl+left click to select multiple</p>
<div id="trash">
    <h4 class="ui-widget-header">Drop Here<span class="ui-icon ui-icon-trash"></span></h4>
</div>

Answer 1

You whole script need to be wrapped by

   $(document).ready(function() {
     // your script

   });

In short,

   $(function() {
      // your script

   });