Menu
What I am trying to do: I am trying to create a Drag-Drop-Sort grid. Followed the same example as JQuery UI Sortable Connect Lists.
http://jqueryui.com/sortable/#connect-lists
My Code Example: My version of the above example is as below JSFiddle,
https://jsfiddle.net/t60x6j2b/5/
JS Code
$(function() {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable",
placeholder: "ui-state-highlight"
}).disableSelection();
});
CSS
#sortable1, #sortable2 {
border: 1px solid #eee;
width: 147px;
min-height: 20px;
margin: 0;
padding: 5px 0 0 0;
float: left;
margin-right: 10px;
height:500px;
overflow-y: auto;
overflow-x: hidden;
}
#sortable1 div, #sortable2 div {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
height: 50px !important;
}
HTML
<div class="title">Column 1</div>
<div id="sortable1" class="connectedSortable">
<div class="ui-state-default">Item 1</div>
<div class="ui-state-default">Item 2</div>
<div class="ui-state-default">Item 3</div>
<div class="ui-state-default">Item 4</div>
<div class="ui-state-default">Item 5</div>
<div class="ui-state-default">Item 6</div>
<div class="ui-state-default">Item 7</div>
<div class="ui-state-default">Item 8</div>
<div class="ui-state-default">Item 9</div>
<div class="ui-state-default">Item 10</div>
</div>
<div class="title">Column 2</div>
<div id="sortable2" class="connectedSortable">
<div class="ui-state-highlight">Item A</div>
<div class="ui-state-highlight">Item B</div>
<div class="ui-state-highlight">Item C</div>
<div class="ui-state-highlight">Item D</div>
<div class="ui-state-highlight">Item E</div>
<div class="ui-state-highlight">Item F</div>
<div class="ui-state-highlight">Item G</div>
<div class="ui-state-highlight">Item H</div>
<div class="ui-state-highlight">Item I</div>
<div class="ui-state-highlight">Item J</div>
<div class="ui-state-highlight">Item K</div>
<div class="ui-state-highlight">Item L</div>
<div class="ui-state-highlight">Item M</div>
<div class="ui-state-highlight">Item N</div>
<div class="ui-state-highlight">Item O</div>
<div class="ui-state-highlight">Item P</div>
<div class="ui-state-highlight">Item Q</div>
<div class="ui-state-highlight">Item R</div>
<div class="ui-state-highlight">Item S</div>
<div class="ui-state-highlight">Item T</div>
<div class="ui-state-highlight">Item U</div>
<div class="ui-state-highlight">Item V</div>
<div class="ui-state-highlight">Item W</div>
<div class="ui-state-highlight">Item X</div>
<div class="ui-state-highlight">Item Y</div>
<div class="ui-state-highlight">Item Z</div>
</div>
As you can see not a lot of difference between my code and jquery ui example.
My problem: Now, my issues is when I drag say Item 1 from column 1 and try and drop in between Item M and Item N on column 2(which are obviously hidden under the scroller), I needed the column 2 scroller to get activated and start scrolling. But rather it scrolls the column 1.
Any help would be much appreciated.
Many thanks,
Karthik
368
You can target the scrollParent property of the scrollable instance and change it on the over event. This is what's being used in jquery-ui to calculate scrolling. It probably should be default behavior, but for some reason it doesn't look like it is.
See this example:
$(function () {
$("#sortable1, #sortable2").sortable({
connectWith: ".connectedSortable",
placeholder: "ui-state-highlight",
over: function (e, ui) {
$(ui.sender).sortable('instance').scrollParent = $(e.target)
}
}).disableSelection();
});.title {
float:left;
}
#sortable1, #sortable2 {
border: 1px solid #eee;
width: 147px;
min-height: 20px;
margin: 0;
padding: 5px 0 0 0;
float: left;
margin-right: 10px;
height:500px;
overflow-y: auto;
overflow-x: hidden;
}
#sortable1 div, #sortable2 div {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
height: 50px !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link type="text/css" rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<div class="title">Column 1</div>
<div id="sortable1" class="connectedSortable">
<div class="ui-state-default">Item 1</div>
<div class="ui-state-default">Item 2</div>
<div class="ui-state-default">Item 3</div>
<div class="ui-state-default">Item 4</div>
<div class="ui-state-default">Item 5</div>
<div class="ui-state-default">Item 6</div>
<div class="ui-state-default">Item 7</div>
<div class="ui-state-default">Item 8</div>
<div class="ui-state-default">Item 9</div>
<div class="ui-state-default">Item 10</div>
</div>
<div class="title">Column 2</div>
<div id="sortable2" class="connectedSortable">
<div class="ui-state-highlight">Item A</div>
<div class="ui-state-highlight">Item B</div>
<div class="ui-state-highlight">Item C</div>
<div class="ui-state-highlight">Item D</div>
<div class="ui-state-highlight">Item E</div>
<div class="ui-state-highlight">Item F</div>
<div class="ui-state-highlight">Item G</div>
<div class="ui-state-highlight">Item H</div>
<div class="ui-state-highlight">Item I</div>
<div class="ui-state-highlight">Item J</div>
<div class="ui-state-highlight">Item K</div>
<div class="ui-state-highlight">Item L</div>
<div class="ui-state-highlight">Item M</div>
<div class="ui-state-highlight">Item N</div>
<div class="ui-state-highlight">Item O</div>
<div class="ui-state-highlight">Item P</div>
<div class="ui-state-highlight">Item Q</div>
<div class="ui-state-highlight">Item R</div>
<div class="ui-state-highlight">Item S</div>
<div class="ui-state-highlight">Item T</div>
<div class="ui-state-highlight">Item U</div>
<div class="ui-state-highlight">Item V</div>
<div class="ui-state-highlight">Item W</div>
<div class="ui-state-highlight">Item X</div>
<div class="ui-state-highlight">Item Y</div>
<div class="ui-state-highlight">Item Z</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
