CODEWITHSUNDEEP
jqueryhtmldrag-and-dropdraggable
Rickstar
Rickstar

Reputation: 6199

Make New Div Draggable in Jquery

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

Upvotes: 7

Views: 13851

Answers (5)

Saqif Haque
Saqif Haque

Reputation: 408

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');
    }
});

}

Upvotes: 0

user1545072
user1545072

Reputation:

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()

Upvotes: 0

cllpse
cllpse

Reputation: 21727

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

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

Upvotes: 11

clinton3141
clinton3141

Reputation: 4841

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.

Upvotes: 3

James Black
James Black

Reputation: 41838

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.

Upvotes: 0

Related Questions