Make New Div Draggable in Jquery

Question

I am trying to make jquery add new div and then make it draggable but i have been trying and looking on google and i can't find anything here is my code below

 $(document).ready(function() {

 $("#draggable").draggable({ 
   containment: 'parent',
   handle: 'drag_border',
   drag: function(e, ui) {
          var top = ui.position.top;
          var left = ui.position.left;
          $("#top").html(top);
          $("#left").html(left);
           }
       }); 
   });

       function New_Text() {   
            $("<div id=\"draggable\" style=\"width: 200px; height: 50px; border:dashed thin; background-color: #fff\">Drag me</div>").appendTo("div#drag_border"); 
              }

Thank you

Passion

This is just a snippet, could you post more of the code so it's easier to debug? – Satire

Can you make the div when the page is loaded, and have it hidden until it is needed? – Compare

@alexy13 - I believe the problem is that he creates the div later, so the event handler isn't attached to the div, and I don't think the live function will work for this, but that is almost what he needs. – Compare

What I meant to say is to post some of the html so that I could find the problem easier. Sometimes I'm not very good at explaining :P – Satire

Answer 1

If you are using jQuery UI, then create your element and make it draggable:

$("<div />").draggable();

Pappus

Answer 2

The problem here is that you're creating the DIV after you've tried to make it draggable.

jQuery events only work on the elements which exist at the time that the Javascript is run - there are ways around this using the live and delegate functions - but it doesn't look like your plugin allows for that.

So if that code needs to remain the same, move the bit which creates the DIV above the draggable function - and it'll work.

Heat

Answer 3

I haven't tried it but this should work:

function New_Text() {   
  $("<div id=\"draggable\" style=\"width: 200px; height: 50px; border:dashed thin; background-color: #fff\">Drag me</div>").appendTo("div#drag_border"); 
        setTimeout(function() {
           ...
          });

         }, 10);
   }

You want to create the div, let the browser add it to the DOM tree, then call the draggable function.

Compare

Answer 4

Since some people mentioned the draggable() function here, which is a jQuery UI function, here is a short how-to:

add the following line (a reference to jQuery UI) to your .html page, inside the head or at the bottom of the body:

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>

now, to make #draggable draggable you write in your script (your script or the reference to it must come after the reference to jQuery UI):

$('#draggable').draggable()

Competency

Answer 5

if you don't have jquery UI then the following solution will help. jquery-ui was causing issues because of my projects jquery version so i had to implement a custom method to handle that. this is a solution i have done for making jquery numpad draggable.

$('.selector').drags();

$.fn.drags = function (opt) {
opt = $.extend({ handle: "" }, opt);

if (opt.handle === "") {
    var $el = this;
} else {
    var $el = this.find(opt.handle);
}

return $el.css('cursor', opt.cursor).on("mousedown", function (e) {
    if ($(e.target).hasClass(".inner-elements-prevent-draggable")) {
        return; // Don't activate drag for elements with the (sometimes  inner element also becomes draggable if you handling a bootstrap package for modal or something else to prevent that you can specify here)
    }
    if (opt.handle === "") {
        var $drag = $(this).addClass('draggable');
    } else {
        var $drag = $(this).addClass('active-handle').parent().addClass('draggable');
    }
    var z_idx = $drag.css('z-index'),
        drg_h = $drag.outerHeight(),
        drg_w = $drag.outerWidth(),
        pos_y = $drag.offset().top + drg_h - e.pageY,
        pos_x = $drag.offset().left + drg_w - e.pageX;
    $drag.css('z-index', 2000).parents().on("mousemove", function (e) {
        $('.draggable').offset({
            top: e.pageY + pos_y - drg_h,
            left: e.pageX + pos_x - drg_w
        }).on("mouseup", function () {
            $(this).removeClass('draggable').css('z-index', z_idx); // you can also set custom z index when drag events happen
        });
    });
    e.preventDefault(); // disable selection
}).on("mouseup", function () {
    if (opt.handle === "") {
        $(this).removeClass('draggable');
    } else {
        $(this).removeClass('active-handle').parent().removeClass('draggable');
    }
});

}

Abshier