For a class, I have to make a Drag and Drop interface using only CSS, HTML 4.01, and Javascript with the JQuery library; no plugins allowed. I figure the best way to do this was aler the CSS position of the div I'm supposed to drag on mousedown and then on mouseup

 $(document).ready(function(){
    $(".draggable").mousedown(Dragging(this));
    function Dragging(draggableObject)
    {
        draggableObject.live("mousemove", function(){draggableObject.css(/*alters the position of the div*/)});
    };
});

My trouble is that draggableObject doesn't seem to have any CSS properties, I tried calling up an alert with its properties and apparently they're null. What am I doing wrong with passing the object, or anywhere else?

1 answer

0
points

When you are passing this into the Dragging function, this is referring to the HTML document, not to the element you are trying to manipulate. You should be able to do something similar to this:

$(document).ready(function(){
  $(".draggable").mousedown(dragging));
  function Dragging() {
    draggableObject = $(this);
    draggableObject.live("mousemove", function() {
      draggableObject.css(/* alter the position */);
    });
  };
});

When you use jQuery to bind to an event, the function that is executed will reference the DOM element that triggered the event as this. In order to access the jQuery CSS functions, you need to make the DOM element a jQuery object which is done by $(this).

I hope this at least gets you closer to your goal. I wasn't able to test this code, so you might have to look into it a little bit.

Answered over 8 years ago by Bryan Rehbein