SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Zealot godfather999's Avatar
    Join Date
    Sep 2011
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem implementing jquery to my site!

    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/...t.drag-2.0.zip
    and
    this is a page: http://threedubmedia.com/code/event/drag/

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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:

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

    And similarly for droppables:

    Code javascript:
    $(document).ready(function(){
        $('.drag').drag(function( ev, dd ){
            $( this ).css({
                top: dd.offsetY,
                left: dd.offsetX
            });
        });
        $('.drop').drop(function(){
            $( this ).toggleClass('dropped');
        });
    });
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Zealot godfather999's Avatar
    Join Date
    Sep 2011
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In head or body?

  4. #4
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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.
    Code:
    <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
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  5. #5
    SitePoint Zealot godfather999's Avatar
    Join Date
    Sep 2011
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I got it man. Thanks for explanation.

  6. #6
    SitePoint Zealot godfather999's Avatar
    Join Date
    Sep 2011
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    SitePoint Zealot godfather999's Avatar
    Join Date
    Sep 2011
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And yeah, how to define a space in which I can move those pictures?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •