jquery-ui-draggable

问题 I'm researching now for over a week and yet I can't drag my JSON value to external draggable divs to a Fullcalendar from Arshaw. Thanks to some help I have my json data loaded to the external divs. All looks correct, however after appending dynamically created divs to the div with 'external-events' class my events are not draggable anymore. If I add .draggable() to my newly created divs to the divs with '.external-event' class it becomes draggable but I can't drop them correctly to my

问题 I am using JQuery UI to implement resizable/draggable elements. Now I would like to define a containment for these elements that limits the resizing/dragging on exactly three(!) sides. E.g. have a look at this JSFiddle example. You can see that the contained element can only be resized/dragged inside the parent's area. What I would like to achieve is that the element can exceed the bottom threshold and be moved to beyond the bottom border of the parent. Nevertheless the resizing/dragging

问题 I want to have several classes of draggables, each one corresponding to a class of droppables. But in addition, I want to have a separate "waste bin", where all the draggables can be dropped until a suitable droppable can be found for them. Now, this can be easily achieved with an accept function. However, I may have up to 20 classes, each one with 30-40 draggables/droppables. So if I use an "accept" function for this, the moment I pick up a draggable, my chrome freezes as it runs tests for

问题 I am using jQuery UI draggable to drag elements but it does not seem to work on textarea and inputs as they are focused whenever I click on them. Here is a JSbin Demo of the problem. HTML <textarea class="movable" placeholder="I am textarea. Try to move me"></textarea> <h2></h2> <div class="movable">I am a DIV. Try to move me</div> JS $('.movable').draggable(); I think I am missing some parameter in draggable method which can do this for me. 回答1: Looks like I have found solution to this

问题 I am using jQuery UI draggable to drag elements but it does not seem to work on textarea and inputs as they are focused whenever I click on them. Here is a JSbin Demo of the problem. HTML <textarea class="movable" placeholder="I am textarea. Try to move me"></textarea> <h2></h2> <div class="movable">I am a DIV. Try to move me</div> JS $('.movable').draggable(); I think I am missing some parameter in draggable method which can do this for me. 回答1: Looks like I have found solution to this

问题 I want to drag an element into TWO OR MORE droppable areas, but those droppable areas need to be wholly contained within my draggable object. The problem is, none of jQuery UI's existing functionality for droppable tolerances meets this need. Ideally I'd use "intersect", but where the the draggable and droppable object measurements are reversed in the code. (This logic can be found in jquery-ui.js by searching for $.ui.intersect .) I have tried overriding that function by duck punching with

问题 I have an arrangement of elements on a page: <div> <div class="dragdrop" style="top:0px; left: 0px; ">1</div> <div class="dragdrop" style="top:40px; left: 0px; ">2</div> <div class="dragdrop" style="top:60px; left: 0px; ">3</div> <div class="dragdrop" style="top:0px; left: 100px;">4</div> <div class="dragdrop" style="top:40px; left: 100px;">5</div> <div class="dragdrop" style="top:60px; left: 100px;">6</div> </div> How can I use jQuery UI (Draggable / Droppable) to make it so that if one div

问题 I'm trying the jQuery Context Menu with jQuery Draggable rows in a jQGrid. The problem I'm having is that since I added the jQuery Context Menu the draggable action is triggered on single click (as well as the normal drag). It looks a little weird when I rightclick a row to get the menu, and then click outside it on another row (to discard the menu) and that row starts following the cursor. Does it have to do with the evt.stopPropagation(); in the following snippet from jQuery Context Menu? $

问题 I am trying to implement jQuery Draggable|Droppable|Sortable between a parent and child frame. I have a this prototype but there is some weird behavior happening win = document.getElementById('frame').contentWindow; element = win.document.getElementById('sortable'); $(element).sortable(); console.log(element); $( "#draggable" ).draggable({ connectToSortable: $(element), iframefix: true, helper: function() {return $("<div/>").css('background-color','red');} }); The iframe page also contains $(

问题 I need to use jQuery UI to restrict the containment area for draggable object with some additional restriction. I need prevent the draggable element from overlapping with other elements within the same container. I need to allow movement in "moveInHere" area but not "butNotHere" area. Is it possible? <div id="moveInHere"> <div id="dragMe"> </div> <div id="butNotHere"> </div> </div> <script type="text/javascript"> $("#dragMe").draggable({ containment: "#moveInHere" }); </script> 回答1: Edit: New