Response title
This is preview!
JQuery-UI drag/drop and swap dynamic elements
in Using jQuery UI
•
11 years ago
I have a project where I want to list the players on a fantasy football team. The first list is a working starting lineup. The second list is of players on the bench. I want to drag a player from the bench and replace a starting player with it. There are conditions that might preclude the swap. For example, I don't want to allow a kicker to replace a quarterback. The end result is to save the new starting lineup to the database.
I can drag a bench player to a starting position and I know the player id of both elements. I don't understand how to make the swap happen. This is where I am in the coding so far;
The source is on http://jsfiddle.net/58WWX/6/
<html>
<head>
<style>
#wrapper {
border: thin dotted orange;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js" type="text/javascript"></script>
< script type = "text/javascript" >
jQuery.fn.swapWith = function(to) {
return this.each(function() {
var copy_to = $(to).clone();
var copy_from = $(this).clone();
$(to).replaceWith(copy_from);
$(this).replaceWith(copy_to);
});
};
$(document).ready(function() {
options = {
revert: true,
helper: 'clone'
};
$("li").draggable(options);
$('#wrapper').droppable({
drop: function(event, ui) {
$('#one').swapWith($('#two'));
$(".ui-draggable-dragging").remove();
$("li").draggable(options);
}
});
});
< /script>
</head>
<body>
<form>
<ul id="wrapper">
<div>
<li id="one">
QB
10101
Sam Bradford
<br />
</li>
<li id="one">
WR
10102
Hakeem Nicks
<br />
</li>
</div>
<br /><br /><br />
<div>
<li id="two">
QB
10101
Michael Vick
<br />
</li>
<li id="two">
WR
10102
Mike Wallace
<br />
</li>
<br />
</div>
</ul>
<br />
</form>
</body>
</html>
1