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) { … Read more
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.
Set the following CSS properties to the image: .selector { user-drag: none; -webkit-user-drag: none; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; }
Try this to move the window manually: void PopupWindow::mousePressEvent(QMouseEvent *event){ mpos = event->pos(); } void PopupWindow::mouseMoveEvent(QMouseEvent *event){ if (event->buttons() & Qt::LeftButton) { QPoint diff = event->pos() – mpos; QPoint newpos = this->pos() + diff; this->move(newpos); } } And declare QPoint mpos somewhere.
You can try jquery-collision plus jquery-ui-draggable-collision. Full disclosure: I just wrote and released these on sourceforge. The first allows this: var hit_list = $(“#collider”).collision(“.obstacle”); which is the list of all “.obstacle” that overlap “#collider”. The second allows: $(“#collider”).draggable( { obstacle: “.obstacle” } ); Which gives you (among other things), a “collision” event to bind to: … Read more
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(); });
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 … Read more
Edit: New Solution I found a plugin for this called JQuery UI Draggable Collision. Using this, implementing your desired functionality becomes trivial. See the following jsFiddle example: http://jsfiddle.net/q3x8w03y/1/ (This uses version 1.0.2 of JQuery UI Draggable Collision, along with JQuery 1.7.2 and JQueryUI 1.1.18.) Here is the code: $(“#dragMe”).draggable({ obstacle: “#butNotHere”, preventCollision: true, containment: “#moveInHere” … Read more
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 … Read more
A common reason this occurs is if you don’t also load jqueryui after loading jquery. For example: <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js” type=”text/javascript”></script> <script src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js” type=”text/javascript”></script> EDIT. Replace the version number for each library with appropriate or latest values for jquery and jqueryui. If this doesn’t solve the issue, review suggestions in the many other answers.