4

i have a dragable item but it is under other html element when i drag it, even i set .item_dragable { cursor: move; z-index: 2147483646; } and on event dragable:

jQuerydragable.draggable({
    cancel: "a.ui-icon", // clicking an icon won't initiate dragging
    revert: "invalid", // when not dropped, the item will revert back to its initial position
    containment: "document",
    helper: "clone",
    cursor: "move",
    zIndex: 2147483647
});

what wrong is it? i use the lastest jQuery and jQuery ui

thanks

user1912285
  • 112
  • 1
  • 7
  • 2
    Have you checked the parent elements? Please provide a jsfiddle or working example. – jtheman Dec 20 '12 at 09:31
  • my dragable item in another element, is its z-index defend on father element? – user1912285 Dec 20 '12 at 09:32
  • Yes certainly it does! Parent element with lower z-indexes would precede the childs z-index (compared to the parents siblings and parent parents if you understand). – jtheman Dec 20 '12 at 09:32
  • yes, the max zindex of all browsers is 2147483647, i already set it – user1912285 Dec 20 '12 at 09:34
  • how could i set the dragable item z-index max without change parent index – user1912285 Dec 20 '12 at 09:36
  • It will not affect the page layering if the parent has lower index than other elements on the page, so basically you can't. – jtheman Dec 20 '12 at 09:37
  • but my item-dragable has many fathers and other element has many fathers too, i must check all element and set all fathers' z-index?is there a simple way to fix this? i use jooml 2.5 and virtuemart 2 – user1912285 Dec 20 '12 at 09:55
  • possible duplicate of [Setting z-index on draggable elements](http://stackoverflow.com/questions/5217311/setting-z-index-on-draggable-elements) – Rick Smith Jun 18 '15 at 23:19

1 Answers1

4

The best way to have your draggable item going over everything else is to use the option appendTo (see jQuery UI doc) and set it to "body" like this :

jQuerydragable.draggable({
    cancel: "a.ui-icon", // clicking an icon won't initiate dragging
    revert: "invalid", // when not dropped, the item will revert back to its initial position
    containment: "document",
    helper: "clone",
    cursor: "move",
    zIndex: 100000,
    appendTo: "body"
});

and of course set a z-index big enough to be higher than all others.

Mordhak
  • 2,646
  • 2
  • 20
  • 14