In all presented answers, I don’t see the most simple and obvious one (maybe I’m missing something in OP question). But, if someone stumble upon this later, and needs fast and simple solution in pure JS.. You do it by changing element className ondragover, and changing back to original class ondragleave my_element.ondragover = function(ev) { …
Update since Angular Material 7 You can simply use cdkDrag directive from @angular/cdk/drag-drop dialog.html <h1 mat-dialog-title cdkDrag cdkDragRootElement=”.cdk-overlay-pane” cdkDragHandle> Hi {{data.name}} </h1> Stackblitz Example Previous answer: Since there is no official solution for that, I’m going to write custom directive that will be applied on a dialog title and do all job for us: dialog.html …
Wojtek’s solution worked perfectly for me. I wound up changing it a tad bit to make it extend jQuery… (function ($) { $.fn.liveDraggable = function (opts) { this.live(“mouseover”, function() { if (!$(this).data(“init”)) { $(this).data(“init”, true).draggable(opts); } }); return this; }; }(jQuery)); Now instead of calling it like: $(selector).draggable({opts}); …just use: $(selector).liveDraggable({opts})
Note: This is now built into matplotlib leg = plt.legend() if leg: leg.draggable() will work as expected Well, I found bits and pieces of the solution scattered among mailing lists. I’ve come up with a nice modular chunk of code that you can drop in and use… here it is: class DraggableLegend: def __init__(self, legend): …
Here is a dead-simple example. It shows a red square. If you drag an image over the red square it appends it to the body. I’ve confirmed it works in IE11, Chrome 38, and Firefox 32. See the Html5Rocks article for a more detailed explanation. var dropZone = document.getElementById(‘dropZone’); // Optional. Show the copy icon …
Either of these work google.maps.event.addListener(marker, ‘click’, function (event) { document.getElementById(“latbox”).value = event.latLng.lat(); document.getElementById(“lngbox”).value = event.latLng.lng(); }); google.maps.event.addListener(marker, ‘click’, function (event) { document.getElementById(“latbox”).value = this.getPosition().lat(); document.getElementById(“lngbox”).value = this.getPosition().lng(); }); You might also consider using the dragend event also google.maps.event.addListener(marker, ‘dragend’, function (event) { document.getElementById(“latbox”).value = this.getPosition().lat(); document.getElementById(“lngbox”).value = this.getPosition().lng(); });
Use the “containment” option: jQuery UI API – Draggable Widget – containment The documentation says it only accepts the values: ‘parent’, ‘document’, ‘window’, [x1, y1, x2, y2] but I seem to remember it will accept a selector such as ‘#container’ too.
$(“#myModal”).draggable({ handle: “.modal-header” }); it works for me. I got it from there. if you give me thanks please give 70% to Andres Ilich
Dragon Drop I’ve done a ridiculous amount of fiddling. So, so much jsFiddling. This is not a robust, or complete solution; I may never quite come up with one. If anyone has any better solutions, I’m all ears — I didn’t want to have to do it this way, but it’s the only way I’ve …
Here’s a really simple example that might get you started: $(document).ready(function() { var $dragging = null; $(document.body).on(“mousemove”, function(e) { if ($dragging) { $dragging.offset({ top: e.pageY, left: e.pageX }); } }); $(document.body).on(“mousedown”, “div”, function (e) { $dragging = $(e.target); }); $(document.body).on(“mouseup”, function (e) { $dragging = null; }); }); Example: http://jsfiddle.net/Jge9z/ I understand that I shall …