Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Testing the ability to ctrl + drag to copy a sortable element
* {
margin: 0;
padding: 0;
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>
<title>jQuery UI Sortable Ctrl Copy Test</title>
<link rel="stylesheet" href="sortableCopy.css" />
Hold down <code>ctrl</code> when dropping the list item on a
different list to copy the item to the new list.
<ul id="box1" class="box">
<ul id="box2" class="box">
<ul id="box3" class="box">
<script src=""></script>
<script src=""></script>
<script src="sortableCopy.js"></script>
;(function($) {
var areas;
$(function() {
areas = $('.box');
// Store the original order of the li elements
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 ='previousIndex');
sender = $(ui.sender[0]);
// Insert the clone into the same index it was previously
if(previousIndex == 0) {
} else {
$('li:eq(' + (previousIndex - 1) + ')', sender).after(cloned);
function updateAreas() {
$('li', this).each(function(index){
$(this).data('previousIndex', index);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment