CODEWITHSUNDEEP
jqueryhtmlcss
user2248441
user2248441

Reputation: 269

drag and drop jquery not working between div tags

I have a page with a left column which stores "panels" which can be dragged onto the main content area of the page. Dragging a panel to a new "area" in the left column works fine, but if I try to drag it into the main content area it seems to go behind it, even using z-index. I created the following to illustrate: JSFiddle

FYI there will be more areas in the main content area to drag to, I just kept it simple for the purposes of this thread. Also in my application the panels are in fact Kendo graphs which require the !important tag to be used on some styling.

Can anyone help?

JScript: 

$('.area').droppable({
tolerance: 'fit'
});

$('.panel').draggable({
revert: 'invalid',
stop: function () {
    $(this).draggable('option', 'revert', 'invalid');
}
});

$('.panel').droppable({
greedy: true,
tolerance: 'touch',
drop: function (event, ui) {
    ui.draggable.draggable('option', 'revert', true);
}
});

CSS:

.area {
display:inline-block;
width:100px;
height:100px;
border:1px solid silver;
background-color:yellow;
padding:10px;
z-index: 10;
}
.panel {
display:inline-block;
width:30px;
height:30px;
border:1px solid silver;
background-color:white;
}
#frameContentLeft {
position: absolute !important;
top: 0px !important;
left: 0px !important;
width: 200px !important;
height: 1000px !important;
background-color: blue;
}
#mainContent {
position: absolute !important;
left: 200px !important;
top: 0px !important;
width: 100% !important;
height: 1000px !important;
background-color: red;
}

HTML:

<div id="frameContentLeft">
    <div class="area">
        <div class="panel"></div>
    </div>
    <div class="area">
    </div>
</div>

<div id="mainContent">
    <div class="area"></div>
</div>

Upvotes: 0

Views: 1081

Answers (2)

ClayKaboom
ClayKaboom

Reputation: 1833

One thing I found out as a problem is that your mainContent z-index is higher than the other panes, try doing something like:

#mainContent {
    position: absolute !important;
    left: 200px !important;
    top: 0px !important;
    width: 100% !important;
    height: 1000px !important;
    background-color: red;
    z-index:-1;
}

Or increasing the z-index of the element you are moving. (Remember that by doing it, you are going to get the same error once you add more divs with higher z-index)

In case you want to dinamically change z-index, you may try to refer to: How to find the highest z-index using jQuery

  • Get the higher z-index
  • and then set this z-index + 1 to the draggable element.

Upvotes: 1

Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26143

You need to set the z-index of the element you are moving...

http://jsfiddle.net/8HQt6/3/

I just set the z-index of .panel to 11 and it works fine.

Upvotes: 2

Related Questions