jquery-ui-draggable

问题 I've got a div with a draggable element which works great in all browsers, except in IE10, there is an issue where if you attempt to drag the element by the scrollbar, it will scroll, until you mouseup, in which case the element will snap to the current position of your mouse. I've setup this fiddle: http://jsfiddle.net/Hhja4/1/ If you are using IE10, just click and hold on the scroll bar and then let go. The div will then follow your mouse around even though you don't currently have the

问题 Basically, I have .dragme (object being dragged), .dropzone1 (place to be dropped at) and an image I want .dragme to become once it has been dropped. So far I have this $(".dropzone1").droppable({ accept:".dragme", drop: function() { alert("DROPPED"); } }); So, that code works, once .dragme has been dropped in place I get the alert. But I've tried using .attr to change the image source of .dragme in place of where the alert is currently (the alert also works if I put it into the below code,

问题 This is a follow up question posted at Jquery drag and drop - click event registers on drop I'm using jquery drag and drop. The draggable elements contain two nested divs floated left and right. The left div contains the text on the draggable and the right div contains a small 'info' button that toggles a tooltip. On drop, I want the left nested div containing the text of the draggable to be clickable. The drop is handled by the following function: function handleElementDrop( event, ui ) {

问题 $(".LWdrop").droppable({ accept: ".LW", drop: function(event, ui){ ui.draggable.addClass("LWactive"); $(this).droppable('option', 'accept',''); $(this).css("background-color", "#444444"); }, out: function(event, ui){ $(this).droppable('option', 'accept', '.LW'); ui.draggable.removeClass("LWactive"); }, activate: function(event, ui){ $(this).css("background-color", "blue"); }, deactivate: function(event, ui){ $(this).css("background-color", "#444444"); } }); Please ignore the ugly background

问题 It seems that the usual method of making jQuery widgets is to call a function on an element, passing the options as a parameter, and then not touching the widget directly again. Is there a way to change a widget's options after it has been created? I want to create a draggable box that is aligned to a grid, but if the user resizes the page, I want to scale the grid. In the window resize event, how can I access the grid property of the draggable element? $('.box').draggable({grid: [40,40]}); .

问题 I want to have a list that is sortable, but I also want the elements in that list to be droppable to the divs I have defined as droppable. I can't seem to find a way to do it. Any ideas? 回答1: Here's a simplified version of Colin's solution. The biggest difference is that this solution does not store the entire html of the sortable elements, but only the currently dragged item. It is then inserted into it's original position if the item is dropped on the droppable area. Anyway, here's the code

问题 I want to have a list that is sortable, but I also want the elements in that list to be droppable to the divs I have defined as droppable. I can't seem to find a way to do it. Any ideas? 回答1: Here's a simplified version of Colin's solution. The biggest difference is that this solution does not store the entire html of the sortable elements, but only the currently dragged item. It is then inserted into it's original position if the item is dropped on the droppable area. Anyway, here's the code

问题 Hi I have this fiddle I get from jquery examples here what it does basically is drag then drop the yellow box to pink division and clone the yellow box. this is the html <ul> <li id="draggable" class="ui-state-highlight">Drag me down</li> </ul> <div> <ul id="sortable"> <li class="ui-state-default">Item 1</li> <li class="ui-state-default">Item 2</li> <li class="ui-state-default">Item 3</li> <li class="ui-state-default">Item 4</li> <li class="ui-state-default">Item 5</li> </ul> <div> and the

问题 I know how to disable draggable when the object is dragged into the correct droppable as you can see below but not when dropped into the wrong droppable. I want the user to not be able to drag again even if the answer is incorrect, which means only one try. I use edge animate which uses a different syntax to get the elements than plain JavaScript but the rest is the same. Below is my code with comments. for(j=0;j<35;j++){ sym.$(answers1[j]).addClass('drag'+j); sym.$('.drag'+j).draggable({ /

问题 I need to drag and drop <span> to <p> . My code works, but I have 3 problems, When I edit <p> content by typing something(suppose three words) and after drag <span> to <p> newly typed words acting as one word. So cannot drop draggable components between those newly typed content. After the close, the added draggable components(by clicking X ) two spaces are remaining between two words. Cannot drop the draggable component as the 1 word of the paragraph. To sort out the 3rd issue I added   to