Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Testing the ability to ctrl + drag to copy a sortable element
* {
margin: 0;
padding: 0;
}
ul,
ol {
list-style: none;
}
p {
margin: 1em .5em;
}
.box {
float: left;
display: block;
width: 25%;
min-height: 10em;
margin: .5em;
padding: 0 .5em;
border: 1px solid #000;
}
.box li {
background: #d2d2d2;
margin: .5em 0;
padding: .25em .5em;
}
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Sortable Ctrl Copy Test</title>
<link rel="stylesheet" href="sortableCopy.css" />
</head>
<body>
<div>
<p>
Hold down <code>ctrl</code> when dropping the list item on a
different list to copy the item to the new list.
</p>
</div>
<ul id="box1" class="box">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
<ul id="box2" class="box">
<li>E</li>
<li>F</li>
</ul>
<ul id="box3" class="box">
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="sortableCopy.js"></script>
</body>
</html>
;(function($) {
var areas;
$(function() {
areas = $('.box');
// Store the original order of the li elements
updateAreas();
areas.sortable({
dropOnEmpty: true,
connectWith: areas,
receive: receiveAreas,
stop: updateAreas
});
});
function receiveAreas(event, ui) {
var cloned;
var isACopy = event.ctrlKey == true;
var previousIndex;
var sender;
if(isACopy) {
cloned = $(ui.item[0]).clone(true);
previousIndex = cloned.data('previousIndex');
sender = $(ui.sender[0]);
// Insert the clone into the same index it was previously
if(previousIndex == 0) {
sender.prepend(cloned);
} else {
$('li:eq(' + (previousIndex - 1) + ')', sender).after(cloned);
}
}
}
function updateAreas() {
areas.each(function(){
$('li', this).each(function(index){
$(this).data('previousIndex', index);
});
});
}
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.