FAQ Database Discussion Community


Draggable is not fit into droppable when dragged back

javascript,jquery,html5,jquery-ui-draggable,jquery-ui-droppable
I am new to the Draggable and Droppable plugin. Here the codepen lin of my app http://codepen.io/anon/pen/qEMVwE This is how it works, 1. We can drag the div element (Blue color) with in the <td> tag. 2. We can place two div in the same row by drag and drop...

jquery droppable only working on first 50% of the width (bug??)

jquery,css,jquery-ui,jquery-ui-draggable,jquery-ui-droppable
I am using draggable and droppable. I got one div per line, each are droppable. Then I have one div, that is draggable. I have noticed that this only works on the first 50% of the divs width. So if I set droppable div to 600 pixels, the droppable will...

Jquery UI Selectable - Selecting multiple elements

javascript,jquery,css,jquery-ui-draggable,jquery-ui-selectable
I'm trying to implement a function to select multiple elements on my application here, but since I'm new to front end development I'm having some trouble controlling JavaScript's events and CSS. I found this post so I'm using It as my guide. Before using the Selectable() function, I was adding...

Score if drag&drop to the right category and make img disappear Drag&drop Jquery game

jquery-ui,drag-and-drop,jquery-ui-draggable
I'm very new to j Query UI. I was trying to design a drag&drop game. I looked into lots of answers in stack overflow but not getting very similar examples(or maybe I couldn't figure out). Basically, I tried to do a recycling game where you can drag and drop different...

Selecting elements moved out of viewport by Jquery draggable

javascript,jquery,html,css,jquery-ui-draggable
My situation is this: I have a large container the size of the screen which is static and has overflow:hidden. Inside is a very large div that is jqueryui-draggable. Inside that are many many small divs. The small divs are all hidden by default, I'd like them to appear when...

Jquery UI trouble with z-Index in both draggable and resizeable divs inside parent container

jquery,css,jquery-ui,z-index,jquery-ui-draggable
I am working on developing a dashboard which will contain data in tiles. Right now I have implemented the Jquery-UI for draggable and resizeable divs. I have also limit the min max height and width but now I am having a problem with dragging and resizing. How I can control...

sortable divs created on the fly with jquery ui

jquery,jquery-ui,jquery-ui-draggable,jquery-ui-sortable
I'm trying to enable sortable feature on div's that are being created on the fly. I could not reproduce the example from jquery UI. Am I missing something? Here's the JS Fiddle: <div id="sortable"> </div> <input type='button' id='btn' value='add'/> $(function(){ var c = 1; $("#btn").click(function(){ var d = $("<div/>"); d.html(c++);...

Using jQuery Draggable with grid and multiple draggable elements

javascript,jquery,jquery-ui,jquery-ui-draggable
I'm trying to find an better solution to drag multiple elements at once, all elements snapping to a grid, with jQuery UI draggable. I found a working solution there for the multiple drag part. I adapted it to be able to use the grid with a "round to multiple" function...

jQuery disable sort by mouse

jquery,sorting,jquery-ui-draggable
Is there a solution to disable ui sorting by mouse drag event in jQuery? I use the function sortable but I created arrows to short. I want to disable the regular mouse drag functionality. function moveUp(item) { var prev = item.prev(); if (prev.length == 0) return; prev.css('z-index', 999).css('position','relative').animate({ top: item.height()...

jQueryUI: how to restrict droppable area to multiple divs?

javascript,jquery,jquery-ui,draggable,jquery-ui-draggable
It feels like the question is already answered: How to select multiple areas in containment using jQuery UI draggable Set more than one containment in jQuery Draggable I have 3 timelines and some draggable elements to place there. For some reason I cannot get it to work. This is the...

jQuery draggable overlaps with multiple droppable, wrong drop

jquery,jquery-ui-draggable,jquery-ui-droppable
I have created this fiddle http://jsfiddle.net/v3L7A/14/ $(function () { $('#draggable').draggable({ helper: 'clone' }); $('#droppable1, #droppable2').droppable({ drop: function (event, ui) { $(this) .append(ui.helper.clone(false).css({ position: 'relative', left: '0px', top: '0px' })); } }); }); When I drag the text, i want the drop "anchor" to be its top left corner, however, it...

Parent div does not scroll on dragging a child inside of it

javascript,jquery,jquery-ui,jquery-ui-draggable
I have a parent div with many child divs. I want when a child div is dragged inside the parent div, then the parent div to scroll. When the parent div is the body, it works. But I want it to work with my own parent "content" div. Here is...

jquery-ui-rails draggable and droppable function does not work

javascript,jquery,ruby-on-rails,jquery-ui,jquery-ui-draggable
I am using jquery-ui-rails gem. I want to implement a simple example of draggable and droppable. This is the javascript file: $('.draggable_images').draggable(); $('#droppable1').droppable({ drop: function(event,ui){ $(this).addClass("ui-state-highlight").find("p").html("Added!"); } }); But the contents of the droppable p tag does not change when an image is dropped. The same code worked when i...

Jquery UI Draggable clone being disappear

javascript,jquery,jquery-ui,jquery-ui-draggable,jquery-draggable
I am trying to use the jquery-ui draggable for make some element draggable. I set the helper option to clone the current element. Its making the clone correctly but when I drop the clone disapear. It doesn't stay at the dragged place. See this for Demo Fiddle Link $('#drag').draggable({ helper:...

jQuery UI Droppable: how to drop the element where the mouse is released

jquery,jquery-ui,jquery-ui-draggable,jquery-ui-droppable
I am using the Droppable method to make a container receive div elements. This container is also sortable. jsfiddle: http://jsfiddle.net/r5vrrcxv/2/ jQuery('#source').sortable(); jQuery('#receiver').sortable().droppable({ drop: function( event, ui ) { $( "<div></div>" ).text( ui.draggable.text() ).appendTo( this ); } }); My problem: when I drag and drop elements into the receiver, the elements...

Fabric.js Images blurry

javascript,jquery,canvas,jquery-ui-draggable,fabricjs
I am using Fabric.js and jQuery UI for a drag and drop scene creator. When I drag and drop an image into the canvas the image becomes blurry/pixelated and appears to be zoomed in. I've been searching Stackoverflow and Google forever and can't find any solutions. I'd appreciate any suggestions...

Get option from ui.draggable

jquery,jquery-ui,jquery-ui-draggable
I am inside the drop event: I have this ui.draggable which is the element I dragged and dropped to enter the drop event. I have setup the ui.draggable with $(element).draggable("option", "cursorAt", { left: $(element).width(), top: $(element).height() }); How can I get now from ui.draggable the option object to reset the...

How can i drag a hidden child element

jquery,jquery-ui,draggable,jquery-ui-draggable,jquery-draggable
I'm using Jquery-Ui for Drag and drop elements . From the left box i would like to drag a hidden elements to the right box. The result is: When i'm dropping the elements, they are appear (display:block) with them parents. Link to JSFIDDLE The problem is that i can't define...

jQuery UI Droppable with Bootstrap Navbar - How to drop a item inside Dropdown

jquery,jquery-ui,twitter-bootstrap-3,jquery-ui-draggable,jquery-ui-droppable
I am using jQuery UI droppable with Bootstrap Menu Navigation... I want to drag a element item from "Menu Items" dropdown and drop inside "My Apps" Dropdown. The dropped element should go inside as "My Apps > ul > li" which will be hidden by default untill I click on...

Get First Span of a
using the data-id

javascript,jquery,html,jquery-selectors,jquery-ui-draggable
I want to get the first span element of a div. This is how i get the div DOM element. helper: function(event,ui){ var dataId = $(this).data('id'); console.log($('[data-id="' + dataId + '"')); } NOTE Im using Draggable plugign from jquery-ui The console.log prints correct the div element, but now i want...

Cursor is off the sorted item of jquery-ui-draggable when its parent is hidden out of screen during sort

javascript,jquery,jquery-ui,jquery-ui-draggable,jquery-ui-sortable
Demo In the demo, the sortable items are in container .area which has a fixed position. When items being sorted and dragged into another container, I want .area to move out of the screen by using transform: translate(0,0). But the problem is that the sorted item is way off the...

jquery-ui draggable: change clone helper's css margin correctly

jquery,html,css,jquery-ui,jquery-ui-draggable
I have a problem with setting css margin property of the cloned helper div element. There are three frames in the following example: green frame is the dragged items storage, blue frame is for dropping, red frame limits the place for dragging. I would like to place items in the...

jQuery drag and drop replace element and dynamically create droppable

jquery-ui-draggable,jquery-ui-droppable,replacewith
I have draggable elements that can be dropped into a container. Within the container is a target 'p' for the user to drop the element on. When dropped, the element replaces the target and dynamically creates a new target. This works great the first time, but subsequent drops don't seem...

How to disable jQueryUI draggable while its in motion, and release the dragged div

jquery,jquery-ui,jquery-ui-draggable
Im building a game prototype in JS which uses sockets for communication (socket.io). When a command to disable dragging comes, I can either use the disable method, or destroy method. Both work fine (but differently) after the dragged div is released, however if the dragging is disabled while the div...

jquery draggable moves on 30 degrees only

javascript,jquery,jquery-ui-draggable
I want to have a selector that moves on a bar on 30 Degree angle , I have done some research on the web but I couldn't find any solution!. I know that : $( ".selector" ).draggable({ axis: 'x' }); will move it on x axis and : $( ".selector"...

jqgrid draggable not working after paging

jquery,jqgrid,draggable,jquery-ui-draggable
I am using draggable jqgrid.But the issue is the rows are draggable only in the first page.After I change the pagination, the draggable for rows is not working.Can you please help me. Below is my code for making jqgrid rows draggable. function GetAllCompanyProducts(productData) { /// <summary>method to load the Proposal...

JQuery Draggabble - Revert to original position not working

jquery,jquery-ui,jquery-ui-draggable
Draggable elements set to revert are reverting to original position PLUS a number of pixels to the left. I just want the element to revert to its original position. var browser; if(navigator.userAgent.indexOf("Chrome") != -1 ){ browser = 'webkit'; } else if(navigator.userAgent.indexOf("Opera") != -1 ){ browser = 'webkit'; } else if(navigator.userAgent.indexOf("Firefox")...

jsTree 3: use a drag handle to restrict initiating dragging

javascript,drag-and-drop,jstree,jquery-ui-draggable,jstree-dnd
Using jsTree 3.0.8 I want to allow nodes to be dragged and dropped within the tree, but it should only allow that action if it was initiated by a drag on a specific button or "drag handle", instead of the default behavior of allowing dragging anywhere on the row. I...

Fabric.js Image.fromURL not working in Firefox

jquery,meteor,drag-and-drop,jquery-ui-draggable,fabricjs
I am using Fabric.js and jQuery UI for a drag and drop scene creator. When I drag and drop an image into the canvas on Chrome everything works fine. However, when I drag and drop an image on Firefox it does nothing and I get the following error in the...

jQuery UI draggable: get the underlaying element at drag-stop

jquery,html5,jquery-ui,html-table,jquery-ui-draggable
Is it possible to get the underlaying element of an dragged element? My specific task is to drag a td element. If the dragstop event is fired I want the underlaying element. The underlaying element is also a td. How could I achiev this? Here is my HTML code: <table...