Problem implementing jquery to my site!

JavaScript
1

I need drag&drop on my site but Im have problem trying to apply it. So can someone tell what to do. When I download what I need I place those 2 files in my js directory which is in root directory. After that in my page’s head section I call those 2 scripts and also jQuery script. And that’s all I did and it’s not working.

This is download link: http://threedubmedia.googlecode.com/files/jquery.event.drag-2.0.zip
and
this is a page: http://threedubmedia.com/code/event/drag/

2

Don’t forget that simply calling the files in the head isn’t sufficient for things to just start working. You’ll also need to initialize the script and tell it which elements are draggable/droppable.

For example, to make something draggable:

$(document).ready(function(){
    $('.drag').drag(function( ev, dd ){
        $( this ).css({
            top: dd.offsetY,
            left: dd.offsetX
        });
    });
});

And similarly for droppables:

$(document).ready(function(){
    $('.drag').drag(function( ev, dd ){
        $( this ).css({
            top: dd.offsetY,
            left: dd.offsetX
        });
    });
    $('.drop').drop(function(){
        $( this ).toggleClass('dropped');
    });
});
3

In head or body?

4

It can be in the head, so long as the script block that uses the code for drag/drop is after the jQuery Library and the jQuery plugin.

e.g.


<head>
  jQuery Library
  jQuery Plugin
  code that uses jQuery and/or plugins
</head>

Take a look at the source code of those example pages to see how they have done it.

Drag: http://threedubmedia.com/code/event/drag/demo/basic
Drop: http://threedubmedia.com/code/event/drop/demo/basic

5

I watched this one and I made it. It worked. But i copied all this meta tags and script tags. So eventually I didn’t understand what does each mean. So I want to do it so I can understand what I did.

Im going to play with it.

6

I got it man. Thanks for explanation.

7

And yeah, how to define a space in which I can move those pictures?