Skip to content

Instantly share code, notes, and snippets.

@mikeplate

mikeplate/jquery-drag-drop-plugin-issue3.html

Created October 20, 2011 07:55
Show Gist options
  • Save mikeplate/1300631 to your computer and use it in GitHub Desktop.
Save mikeplate/1300631 to your computer and use it in GitHub Desktop.
Download ZIP
Example of issue 3 for jquery-drag-drop-plugin
Raw
jquery-drag-drop-plugin-issue3.html
<!DOCTYPE html>
<html>
<head>
<title>Issue 3</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://mikeplate.github.com/jquery-drag-drop-plugin/jquery.drag-drop.plugin.js"></script>
<style>
.whileDragging {
background-color: yellow;
}
.hilightDropped {
background-color: orange;
}
</style>
<script>
$(function() {
$('.draggable').dragdrop({
sourceHide: true,
dragClass: "whileDragging",
canDropClass: 'hilightDropped',
dropClass: 'hilightDropped',
didDrop: function($src, $dst) {
alert('dropped '+$src.text());
}
});
});
</script>
</head>
<body>
<ul class="unstyled draggable">
<li id="opt_qu_0" class="">comments</li>
<li id="opt_qu_1" class="">Name</li>
<li id="opt_qu_2" class="">jobTitle</li>
<li id="opt_qu_3" class="">phone</li>
</ul>
<ul class="unstyled drop" id="idOrderingList">
<li id="inc_qu_0" class="">Ultimate Question</li>
<li id="inc_qu_1" class="">Email</li>
<li id="inc_qu_2" class="">product1</li>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment