JQuery horizontal sorting and resizing leads to element overloads when sorting
I am using jQuery to create a set of horizontally sorted elements that are also resized using the right (east) handle. The problem is that after resizing an element, when I move it horizontally, while moving, the element jumps to the top of the page.
Html
<div id="spacer"></div>
<div id="box">
<div id="list">
<div class="resize">ONE</div>
<div class="resize">TWO</div>
<div class="resize">THREE</div>
</div>
</div>
JAVASCRIPT
$(function() {
$('#list').disableSelection().sortable({
scroll: true,
placeholder: 'placeholder',
containment:'parent',
axis: 'x'
});
$('.resize').resizable({
handles: 'e'
});
});
CSS
#spacer {height: 100px}
#box {
height: 40px;
width: 500px;
float: left;
}
#list {
background-color:blue;
white-space:nowrap;
overflow-x:scroll;
overflow-y:hidden;
}
.resize {
background-color:darkgray;
height:40px;
width:100px;
cursor:move;
display:inline-block;
}
.placeholder {
display:inline-block;
height: 1px !important;
}
.ui-resizable-handle {
height:15px;
width: 20px;
background-color:red;
cursor: pointer;
}
What am I doing wrong? jsFiddle - here .
+3
source to share
2 answers