Home/ Questions/Q 6979057
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T17:50:13+00:00

I’ve just started learning javascript and have created a drag and drop using jquery

  • 0

I’ve just started learning javascript and have created a drag and drop using jquery draggable.

The demo is here:

http://www.vwardv.com/doll6.html

I couldn’t find a tutorial so I just went on to the jquery site and played around with adapting the demo. It works but I have no idea if I’ve coded it the way it should actually be coded. I would be really grateful if you could tell me if you see anything you would improve.

Here’s the code: 

<!doctype html>
<html lang="en">
<head>


<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>


<script>
$(function() {
    $( "#draggable" ).draggable()
});
</script>

<script>
$(function() {
    $( "#draggable2" ).draggable();
});
</script>

<script>
$(function() {
    $( "#draggable3" ).draggable();
});
</script>

<script>
$(function() {
    $( "#draggable4" ).draggable();
});
</script>

<script>
$(function() {
    $( "#draggable5" ).draggable();
});
</script>


</head>
</body>

<div id="bodies/palepd.gif">
<img src="bodies/palepd.gif" class="ui-widget-content" id="draggable">
<img src="bodies/trousers.gif" class="ui-widget-content" id="draggable2">
<img src="bodies/top.gif" class="ui-widget-content" id="draggable3">
<img src="bodies/dress.gif" class="ui-widget-content" id="draggable4">
<img src="bodies/coat.gif" class="ui-widget-content" id="draggable5">
</div>

Thank you

Vic

update*

Thank you for all your advice, I really appreciate it. I have now adjusted the code according to your advice. Let me know if I’ve misunderstood anything or if there’s anything further I could improve. Thank you

<!doctype html>
<html lang="en">
<head>


<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>


<script>
$(document).ready(function() {
    $( ".mydraggable" ).draggable();
});
</script>


</head>
<body>

<div id="items">
<img src="bodies/palepd.gif" class="mydraggable">
<img src="bodies/trousers.gif" class="mydraggable">
<img src="bodies/top.gif" class="mydraggable">
<img src="bodies/dress.gif" class="mydraggable">
<img src="bodies/coat.gif" class="mydraggable">
</div>


</body>

*update 2

Can anyone tell me why I should us ‘ui-widget-content’ instead of ‘mydraggble’?

Now I need to move on to the next stage, which is ordering the items so for example, you can put a top behind a jacket etc.

I will need to add two buttons to the page: one will move an item up a layer/layers, and one will move it down a layer/layers. This will obviously mean I will need to build in some means indicating which item is selected, for clarity. Can anyone point me in the right direction for both/either of these things?

Thanks again

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Would be better to replace those 5 separate script blocks with one:

    <script>
$(document).ready(function() {
  $( "#draggable, #draggable2, #draggable3, #draggable4, #draggable5" ).draggable()
});
</script>

    Even better would be to give a class ‘mydraggable’ to every draggable element on your page and them replace the above with:

    <script>
    $(document).ready(function() {
      $( ".mydraggable" ).draggable()
    });
</script>
    • 0