Questions tagged [jquery-ui-draggable]

1

votes
0

answer
298

Views

How to add arrow in jquery connections

I used jquery connector - https://github.com/musclesoft/jquery-connections to connect two draggable DIV element. Problem: It should represent the direction of flow in the connector. Need to add an arrow to jquery connector.
Dhananjayan
1

votes
1

answer
59

Views

Sortable divs from/to draggable divs

I have .rc divs inside a .rcs div. The .rcs divs are sortable. The .rcs divs are inside a .ra div. The .ra div are draggable. When I move a .rc from the first .ra to the second one, during the transition, the .rc is hidden. I don't get this behaviour when I make the .ras div sortable (.ras is the pa...
user2479920
1

votes
1

answer
21

Views

dragging a dropped element back to its original container

so this is what I have till now (I am working with third party example)... var numbers = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]; for ( var i=0; i
Apurva
1

votes
2

answer
96

Views

ui.position.left not working with css margin: 0 auto

I want to build a scrollable menu that should use margin: 0 auto; Below is my codepen where it is working fine because I didn't use css margin: 0 auto (refer css panel .wrap class). But this has two issues: It is not scrolling end to end - Codepen url: codepen.io/VK009/pen/PRKmNP While using margin:...
Aman verma
1

votes
1

answer
20

Views

Error in form display correction in draggable and droppable?

I have a two draggable div.I wrote a javascript inside the drop function.When I drag the first draggable div and click the first drag div ,its call the second draggable onclick function. $(function() { $('.draggable1').draggable({ cursor: 'crosshair' }); $('#droppable').droppable({ drop: function(ev...
Nandy
1

votes
0

answer
35

Views

resizing after drag and drop

I found the code of drag-and-drop on Youtube but can't make it resizable after it has dropped. don't know where to add .resizable() method I have problem resizing after element has dropped. I also want to save the position after it has dropped and resized. Please let me know how to do that I will ap...
YouSong Nam
1

votes
0

answer
21

Views

How can we apply pre position for draggable element in jquery?

I have so many images on droppable div, i am storing its position top and left in the database, now when i go for the edit, I want to apply its pre position to that draggable element, can anyone please help how can i apply that in this function ? Draggable is working for me, but i want to preload i...
Tirkesh Turkesh
1

votes
2

answer
72

Views

Capture drag amount using dragstart and dragend in jquery

I want to capture initial position from where drag is started and the amount of drag (in x & y direction) and pass it to another function for further processing. My html is below: body{ padding:0; margin:0; } .wrapper{ width:1800px; height:2500px; background:#86CDEA; } And my Script is : var parentO...
Shubh
1

votes
1

answer
332

Views

drag and drop into a scrollable div

So I have created a very short drag and drop program which works however there is a small glitch. created a js fiddle here just to show you the issue I am facing As you can see you are able to drop the cards into the dotted slots. the problem occurs when one moves the scroll bar of the div (that co...
Apurva
1

votes
0

answer
35

Views

A grid with dragging/dropping and sorting categories

I am trying to build an application that allows users to perform story mapping. A little note to what that is: You have a bunch of sticky notes and you make a map of all user tasks and goals put it across a board. I have to set up something that allows that. Preferably an independent grid that can p...
Edd Chang
1

votes
2

answer
619

Views

Change color of draggable on drop AND within droppable zones on hover

I am dragging the 'drag' to 'container1' and 'container2'. When it is dropped, 'drag' either turns dark purple if in 'container1' or dark orange if in 'container2'. This is what I have, this changes 'drag' when it is hovering over the droppable containers, but it does not change the color when it i...
1

votes
0

answer
28

Views

jQuery 'drop' function is not being called, overridden by 'over' function

I am dragging the 'drag' to 'container1' and 'container2'. When it is dropped, 'drag' either turns dark purple if in 'container1' or dark orange if in 'container2'. When 'drag' is passing through 'container1', it should turn green, and when it is passing through 'container2', it should turn yellow (...
1

votes
0

answer
16

Views

Removing style after release is too late

When I activate the draggable I make the boxes a little bigger using padding with animate. Because animate causes a delay I can't remove all styling because of this delay. $('#categories li').droppable({ tolerance: 'pointer', activate: function (event, ui) { $('.ui-droppable-active').animate({ paddi...
Sinan Samet
1

votes
1

answer
206

Views

Drag and drop of an image in a web page using Jquery

I have list of thumbnails. I want to drag those images to the container. I want thumbnails to be changed to original pictures which are stored in the db.And I want to perform drag action (overlap)on those images which are dropped inside the container. Below is the code snippet Here i am using draggi...
Karthik P B
1

votes
0

answer
31

Views

Jquery UI: Want effect when not accepted draggable is 'dropped' on droppable

I'm not familiar with jquery ui in depth and didn't find a solution for the following simple setting: I have a gallery with different kinds of waste and two trash cans, one for paper and one for 'bio'. When the user drags #waste_1 and drops it on #paper everything is ok, because .paper is accepted i...
sk393
1

votes
0

answer
27

Views

jquery ui draggable position relative not working

i wanted to create some icons like windows, but not being able to do so. here is irregular positioned icons DEMO My css works fine if i use simple Draggable function like one : $( '.big_dawg span' ).draggable({ }); Please change height of jsfiddle result to see responsive spans: Another DEMO or if i...
Makashif
1

votes
2

answer
38

Views

how to refresh events on element in jquery (ui)

Is there a way to 'refresh' events that should apply on elements with jquery? To explain better here's my case. I have a document.ready() function that does it's jobs on two lists: List A containing elements with class a, List B containing elements with class b. I want to let users move using dragga...
DethoRhyne
1

votes
0

answer
49

Views

How to resize the movable screen in proportion to the video screen behind it?

I am working on a website in which I want to resize the movable screen in proportion to the video screen behind it. The video screen is behind the movable screen so if I resize the movable screen then the video screen should also get resized. The HTML code for the movable (draggable/resizable) scr...
john
1

votes
0

answer
51

Views

Recalculate width of dragged element with jQuery UI draggable

I need to dynamically change the width of a if it is dragged out of its parent element so its right edge stays 'glued' to the parent's right edge and the contents of a wrap inside the new width. After days of googling and reading posts here I've managed to resize the once when it touches the pare...
fpiskur
1

votes
1

answer
23

Views

JQueryUI - droppable.touch change

I am currently trying to make an extended droppable area but I got some problem. Here is the code (explanation below) : $('div#1').find('div[cid='draggable']').each(function(i, e) { $(e).after(''); $('div#drp').droppable({ drop:function(event, ui) { ajaxCall = false; ui.draggable.css('left', '0'); u...
P. Jerome
1

votes
1

answer
44

Views

Drag and Drop put element on wrong div

I'm trying to swap two images with jQuery Draggable when user clicks on one element and drags it over another. However, my code does not put images in the correct position. It leaves the destination image in the same place and places the image that was dragged on the next div, overlapping another im...
Henrique
1

votes
1

answer
76

Views

jQuery drag-drop working for files, but not folders

I'm using the jquery and jquery UI plugin to drag and drop elements (folders and files) just like in a filebrowser. I can manage to have the file go 'into' the folder, but not a folder to go into another. Here is a demo : There seems to be something conflicting, but I don't know where to look anymor...
Bryan Meyer
1

votes
2

answer
28

Views

jquery ui draggable prevent click outside

I've got a draggable div which moving is limited on the y axis. My code : $('.drag').draggable({ axis: 'y' }); This works fine. But, this div is near other ones that have click events. On the y axis, the cursor moves with the draggable objects so all is fine. But on the x axis, the cursor is not li...
Pit COOLEN
1

votes
3

answer
2.6k

Views

jQuery Drag from a List (without removing element) and Drop into another List

How can I have two lists (div or table elements) in which I can drag & drop items from one to the other (I think jQuery droppable does this), but without actually removing it from the source list? Example: List1 List2 AAA 111 BBB 555 CCC 999 DDD 777 Now I'm dragging BBB from the l...
Alex
1

votes
2

answer
4.8k

Views

JQueryUI draggable “Object doesn't support this property or method” when jquery-ui is included

I've got the classic Object doesn't support this property or method message when using JQuery UI. Hovever, this has come up after integrating my work into another solution. I've definitely included the script (it's visible in the Script Documents shown in VS during debugging run-time and in Firebug'...
StuperUser
1

votes
3

answer
3.4k

Views

jQuery UI draggable-sortable does not work inside an initially inactive tab (jquery ui tabs)

i'm developing a drag-and-drop interface using jQuery-UI Draggable + jQuery-UI Sortable inside a jQuery-UI Tabs here's the HTML code: One Two Three One Two Satu And here's the javascript code: jQuery(function() { jQuery( '#tabs' ).tabs({ selected: 0 }); jQuery('.sortable .target').sortable({ opa...
Dwi Ash
1

votes
1

answer
662

Views

jquery - drag & drop table

In jquery how to do the drag and drop of table instead of rows ? By using var rows = table.tBodies[0].rows; only getting the rows. But I want the table to be drag and drop.
sreenavc
1

votes
1

answer
6.2k

Views

jquery UI draggable helper: clone removes draggable from original?

I am using draggable with the following options: $('#accountDetailPanel .draggable').draggable({ helper: 'clone', appendTo: 'body', cursor: 'move', revert: 'invalid' }); $('.accountPod').droppable({ accept: '.draggable' }); I'm applying draggable to the content of the 2nd tab of a jquery UI...
Brian
1

votes
1

answer
1.9k

Views

jQuery UI Sortable and Draggable List Interaction Not Working Quite Right

I have a recipe tracker tool for World of Warcraft players here: http://www.wowgeeks.com/tracker.php?item=recipes. I have three custom-designed lists: a 'Have' list, a 'Need' list, and the list of original items to choose from. I have the last list as a draggable, with its connectToSortable set to a...
TerranRich
1

votes
1

answer
862

Views

drag and drop - sortable not working when list comes dynamically

Here i have done : http://jsfiddle.net/thilakar/QNkEL/2/ I can draggable the parent element and child element too. but i need drop the content between the child and another child(another parent child element.) My requirement: i need to drag and drop the text between child and also drop the content a...
Mr.T.K
1

votes
1

answer
2.3k

Views

Prevent drop event to propagate to the parent if an inner droppable does not accept the draggable

I have a droppable div#space and a collection of draggable li.element. When I drag an li.element in the div#space a new ul.group is created, the li.element is appended to the ul.group and finally the ul.group is made droppable. Given I would like these elements to behave as follows: when an li.elem...
basilikode
1

votes
1

answer
1.4k

Views

Expand containing div when dragging an item inside it and reaching limits

My page has several items (divs) that are draggable and resizable. My code for doing this is given below: part.draggable( { containment: 'parent', drag: function(event, ui){ partIsDragging = true part.prev().css('top', ui.position.top - 20 ).css('left', ui.position.left ) part.prev().show() }, stop...
user253530
1

votes
1

answer
611

Views

jQuery Recalculate Drop points from Sortable

I have a bug similar to this answered question: js/jQuery Drag'n'Drop, recalculate the drop targets If a user has a draggable move around the layout, and change the position of the droppable, $.ui.ddmanager.prepareOffsets can be called to reset the offset. This is the answer in the above ticket. I...
Dave Stein
1

votes
1

answer
965

Views

How do I make elements that are generated after page load (ajax) become draggable?

I have a div on my page that gets populated via an ajax call to separate php script every 2000ms. When the user checks a checkbox, the update interval stops and all the items in the div need to become draggable. If I do this without the update interval it works, but once I have the div reloading t...
Brian
1

votes
3

answer
273

Views

How do I change the shape or look of jquery UI controls?

I'm working on a project that needs a lot of draggable items on one droppable place, I know how to create draggable and droppable items with the various options, but what I'd like to do is give these a custom look. Is there a way to do this? I've bbeen searching google for 'jquery change draggable...
Levi Campbell
1

votes
1

answer
1.9k

Views

Avoid overlap between multiple draggable canvas with jQuery

I'm trying to make three canvas to be draggable and at the same time to avoid them from overlapping each other. I looked for similar questions about the topic and I found out about the library 'jquery-ui-draggable-collision'. These is the code that I have: $(document).ready(function(){ $('.cube').dr...
lgomezma
1

votes
1

answer
848

Views

IE iframe widget and jQuery drag and drop alignment issue

I have created a small widget using jQuery UI and drag-drop plugins. Now, I am finding some issues with IE. This widget can be accessed at - http://widget.adipa.com. At this URL, widget works well with IE7/8. But when I embed this widget inside the iframe, as done here, it starts giving misaligning...
rtdp
1

votes
2

answer
519

Views

Calling methods for draggable element

I have this code for a page with draggable divs. Initially, I had the first two lines of the code, to make the divs draggable and to specify a drag handle. Then I needed to add a helper function to clone the draggable. When I added the helper function, it broke the code. The divs weren't draggab...
user823527
1

votes
1

answer
722

Views

jQuery-ui sortable draggable modules running into multiple problems?

(In summation, my problem can be viewed here: http://jsfiddle.net/F5Wve/12/) So I am trying to fix the code I'm running on the website I'm working on with my friend called, FriendGrid , we are using the jQuery-UI to add sortable modules in a three column interface, unfortunately I'm running into som...
Ethan722
1

votes
2

answer
3.6k

Views

How to automatically reorder a Sortable jQuery UI list?

I have 2 jQuery UI sortable lists (http://jqueryui.com/demos/sortable/#connect-lists). I drag items from list A (catalog) to list B (basket). What I want is for the lists (A and B) to reorder themselves automatically when an item is added (sorted by price). So when an item is dropped into the basket...
Matthieu Napoli

View additional questions