Search Results

Search found 352 results on 15 pages for 'draggable'.

Page 2/15 | < Previous Page | 1 2 3 4 5 6 7 8 9 10 11 12  | Next Page >

  • Javascript: Make Rows Draggable Through Input Field Handles

    - by Corey O.
    I have created a table with draggable rows. Unfortunately, most of the rows are covered with a large textbox input element. In order to drag the rows, you have to grab the row on the very edge just outside of the textbox. Is there a way to allow the rows to be grabbed through the textboxes without destroying the textbox functionality? (i.e. relay the mouse drag event, but not the mouseclick event?)

    Read the article

  • jQuery UI regenerate (zombie) draggable elements

    - by Rio
    Dear all, I'd like to know how to create draggable elements using jQuery UI that once they are dragged and dropped into another container, regenerate the same item. For example, I can drop a button from container A to container B, and once I do that, the same button (a clone) re-emerges in container A. Thanks in advance.

    Read the article

  • Establish draggable content constraints depending on position

    - by drukelly
    Asking all jQuery experts! How would I go about setting up constraints for a draggable element depending on its positioning? I have a basic example here. I thought it would be as simple as adding an option, containment. Ideally, I want it to drag within the following box: top: 0px left: 0px top: -263px left: -272px top: 0px left: -272px top: -263px left: 0px Is there a way to drag the element within the parameters above so you don't the extra white space? I appreciate the help!

    Read the article

  • Making Google Maps overlay draggable

    - by Rene Saarsoo
    I have extended GOverlay so that it draws small rectangular div at a specified location. But how to make it draggable using Maps API V2? First I tried to just listen the mousedown/up/move DOM events of the div itself. While I got this mostly working, I thought that there has to be a simpler way of doing that. I tried listening the "drag" event of the map itself, which didn't work as I expected. I also found GDraggableObject, which seemed like something to use exactly for that, but I didn't understand how to really use it. Any suggestions?

    Read the article

  • Jquery Help : Draggable to Sortable and then back to draggable again.

    - by Swamy g
    I have a pool of items in the drag list which is connected to a sortable using connectToSortable option. Now I want to remove some items from this sort list and move them back to the drag list. Sort of like an undo. Suppose the user moves some 5 items to sort list and decides he/she wants only 4 items, and decides to just drag the unwanted item from the sortlist TO the drag list. How do I accomplish this WITHOUT adding a "remove" link in the sort list. Thanks a lot. For more information please refer to http://the-stickman.com/web-development/javascript/jquery-dropping-items-from-a-draggable-list-to-a-sortable-list/

    Read the article

  • jQuery Draggable Problem

    - by Jimbo
    Im trying to get a div to be movable within the constrains of the browser window, by dragging the titlebar inside the div. My code is as follows: <div id='container'> <h3 class='title' id='titlebar'>My Title</h3> </div> <script type='text/javascript'> $(document).ready(function(){ $("#titlebar").draggable({ containment: 'window', scroll: false, helper: $('#container') }); }); </script> Something is wrong with this (it wont do anything at all) but I cant see the problem!

    Read the article

  • jQuery's draggable grid

    - by Art
    It looks like that the 'grid' option in the constructor of Draggable is relatively bound to the original coordinates of the element being dragged - so simply put, if you have three draggable divs with their top set respectively to 100, 200, 254 pixels relative to their parent: <div class="parent-div" style="position: relative;"> <div id="div1" class="draggable" style="top: 100px; position: absolute;"></div> <div id="div2" class="draggable" style="top: 200px; position: absolute;"></div> <div id="div3" class="draggable" style="top: 254px; position: absolute;"></div> </div> Adn all of them are getting enabled for dragging with 'grid' set to [1, 100]: draggables = $('.draggable'); $.each(draggables, function(index, elem) { $(elem).draggable({ containment: $('#parent-div'), opacity: 0.7, revert: 'invalid', revertDuration: 300, grid: [1, 100], refreshPositions: true }); }); Problem here is that as soon as you drag div3, say, down, it's top is increased by 100, moving it to 354px instead of being increased by just mere 46px (254 + 46 = 300), which would get it to the next stop in the grid - 300px, if we are looking at the parent-div as a point of reference and "grid holder". I had a look at the draggable sources and it seem to be an in-built flaw - they just do all the calculations relative to the original position of the draggable element. I would like to avoid monkey-patching the code of draggable library and what I am really looking for here is the way how to make the Draggable calculate the grid positions relative to containing parent. However if monkey-patching is unavoidable, I guess I'll have to live with it. Thanks!

    Read the article

  • Combine Text with a Draggable Mask AS3.0

    - by RC
    So I have an image that is the size of the stage: img_mc. Then I drew a small rectangle: mask_mc. The idea is to make a "window" of the small rectangle, view img_mc through the window, and be able to drag the window around. The following code works fine but I want to add text to the mask - "Drag Me!" or whatever. But if I group text with the mask it breaks down. If I make a separate text_mc I can drag it around but it's not part of the mask. How can I combine text with a mask? (sorry if this question is pathetically easy!) Thanks for any thoughts you can share! img_mc.mask = mask_mc; mask_mc.buttonMode = true; img_mc.cacheAsBitmap = true; //because I blurred the mask text_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragF); mask_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragF); stage.addEventListener(MouseEvent.MOUSE_UP, dropF); function dragF(event:MouseEvent):void{ mask_mc.startDrag(); } function dropF(event:MouseEvent):void{ mask_mc.stopDrag(); }

    Read the article

  • jQuery - resizable + draggable, the scrolling(left,top) is not added

    - by CezarisLT
    I have a problem with a dragging and resizable box. It works fine, drags and rezises fine, but i have a container that holds these elements and as soon as I trigger an overflow and attempt to rezise the div it fails and resets backs to container width. http://jsfiddle.net/JTTYM/26/ It seams as the this.scrollLeft and this.scrollTop are not included on drag. Can someone please help me with this? Thank you in advance.

    Read the article

  • How to dynamically set div size?

    - by Vafello
    I have a div container with a text that has been previously typed in by the user. I would like to adjust the size of the div to this text. I cannot have fixed size because I dont know the length of the text. If there is no size specified div takes the width of entire window. This cause some problems for me because I am using JQuery draggable plugin and the scrollbars appear immediately when the div is dragged. Any advice on that?

    Read the article

  • Draggable Clones Jquery?

    - by jbatson
    Any ideas on how to make the clones draggable? $("#draggable").draggable({ helper: 'clone', cursor: 'pointer', }); $("#snaptarget").droppable({ drop: function(event, ui) { var randomnumber = Math.floor(Math.random()*1000000); var newId = '#draggable_'+randomnumber; $(ui.helper).clone(true).removeAttr('id').attr('id',newId).appendTo('#snaptarget'); $(newId).draggable(); } }); $(newId).draggable(); does not work.

    Read the article

  • How do you return draggable content to their original positions in iPhone dev?

    - by Matt Thomas
    I am wanting to create a button in my iPhone app that when touched will return other draggable elements to their original position. I have looked at the Apple "MoveMe' example, but that returns the button to the center of the screen. I want to be able to position draggable objects around the screen, drag the objects within the app, and then return them to their original starting positions by pressing a designated button. Any help appreciated!

    Read the article

  • Making an element draggable?

    - by user246114
    Hi, I'm trying to make an element draggable, like so: var element = $("<li id='test'>Hello</li>"); element.appendTo("#panelParent"); element.draggable("enable"); element.draggable("option", "connectToSortable", '#panelTarget'); element.draggable("option", "helper", 'clone'); element.draggable("option", "revert", 'invalid'); nothing happens when I try dragging this element. It works fine though if I embed the object in the page beforehand instead of trying to dynamically create the element. Any idea what I'm missing? For example, this works: $(function() { $("#test").draggable({ connectToSortable: '#panelTarget', helper: 'clone', revert: 'invalid' }); }); <ul> <li id='test'>Hello</li> </ul> Thanks

    Read the article

  • jQuery: Trouble with draggable across cloned elements

    - by Rosarch
    I'm trying to implement: User drags a draggable li to a droppable li. The original li is no longer draggable A new li is cloned from the original li, and is appended to the droppable li. I can't get it to work. function moveToTerm(original_course, helper, term) { var cloned_course = original_course.clone(true); original_course.addClass('already-scheduled'); original_course.draggable('disable'); cloned_course.draggable(); cloned_course.appendTo(term).hide().fadeIn('slow'); } This works fine, except now the cloned_course is not draggable. A droppable li: <li class="term ui-droppable"> <strong>Fall 2010</strong> <li class="course">Computing Cultures</li> <!-- this course was just dropped. I want it to be draggable but it's not --> <li class="course ui-draggable" style="display: list-item;">New Media and Society</li> </li> What am I doing wrong?

    Read the article

  • Draggable & Resizable Editors

    - by Geertjan
    Thanks to a cool tip from Steven Yi (here in the comments to a blog entry), I was able to make a totally pointless but fun set of draggable and resizable editors: What you see above are two JEditorPanes within JPanels. The JPanels are within ComponentWidgets provided by the NetBeans Visual Library, which is also where the special border comes from. The ComponentWidgets are within a Visual Library Scene, which is within a JScrollPane in a TopComponent. Each editor has this, which means the NetBeans Java Editor is bound to the JEditorPane: jEditorPane1.setContentType("text/x-java"); EditorKit kit = CloneableEditorSupport.getEditorKit("text/x-java"); jEditorPane1.setEditorKit(kit); jEditorPane1.getDocument().putProperty("mimeType", "text/x-java"); A similar thing is done in the other JEditorPane, i.e., it is bound to the XML Editor. While the XML Editor also has code completion, in addition to syntax coloring, as can be seen above, this is not the case for the JEditorPane bound to the Java Editor, since the JEditorPane doesn't have a Java classpath, which is needed for Java code completion to work.

    Read the article

  • jquery: draggable plugin -> remove drag behaviour from html5 video controls?

    - by mathiregister
    hi guys, im working with the jquery ui draggable plugin and i have an html 5 video element with "preload controls" that acts kind of buggy. I $(".thumb").draggable(); if i drag the video by clicking on the video controls and i'm releasing the mouse again, the video still sticks with the mouse. <div class='thumb video'><video width='260' height='200' preload controls> i have no chance to release the video again if i started draggin it at the video controls. any idea how i could fix this! i probaply should script my own video controls to fix this.

    Read the article

  • JavaScript: Container with draggable. Constrain draggable to a circle shape, in container.

    - by ritsuke
    Hey guys, I'm looking for a simple solution to place a draggable element inside of a box container. When the user begins to interact with the draggable, the draggable element should remain constrained to a circular shape, within the container. At a complete loss as to how I should accomplish this. Thank you! :-) Additional: Box container would be 100 pixels wide and tall Draggable would be 20 pixels wide and tall http://tool-man.org/examples/dragging.html This is on the TODO list, but of course this site is no longer maintained

    Read the article

  • jQuery live draggable / live droppable?

    - by Henk
    Hi all, Basically there are two tables: Companies and visitors. Currently it's possible to drag visitors to companies. Works great. As soon as the drop function occurs, there are two $.post's. The first one saves the drag to the database. The second one updates the visitors, because the information constantly changes. The problem, however is that as soon as the second $.post finishes, Firebug keeps popping the following error: d(this).data("draggable") is null Which occurs in the jQuery UI file. On line 56. about 400 times or so. So basically I'm looking for a way to do live() with draggable and droppable. The .draggables are in #visitors (an ul). The droppables are in #companies (a table). Thanks! $(".draggable").draggable({ revert:true }); $(".droppable").droppable({ drop: function(ev, ui) { $(this).text($(ui.draggable).text()); $.post('planning/save_visit', {user_id: $(ui.draggable).attr('id'), company_id: $(this).attr('id'), period: $('ul.periods li.active').attr('id')}); $.post('planning/' + $('ul.periods li.active').attr('id'), {visitors:true}, function(data){ $('#visitors').html(data); }); }, hoverClass: 'drophover' });

    Read the article

< Previous Page | 1 2 3 4 5 6 7 8 9 10 11 12  | Next Page >