So I've been fiddling around with JQuery UI, and I've look at at least three tutorials, fiddles, and StackOverflow questions. None of them have been able to achieve what I'm trying to figure out, and even with the code I could find all I got was some broken confusing code. I have some idea of what I'm doing but I really don't know what to do. Anyone who can fix this code?
HTML(Works perfectly):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
</script>
<script src="https://code.jquery.com/ui/1.12.0-rc.2/jquery-ui.min.js" integrity="sha256-55Jz3pBCF8z9jBO1qQ7cIf0L+neuPTD1u7Ytzrp2dqo=" crossorigin="anonymous"></script>
<div class = "draggable">test</div>
<div class = "draggable">test</div>
<div class = "droppable"></div>
<div class = "droppable"></div>
CSS (Works perfectly):
div{display:inline-block;width:128px;height:128px;border: 1px solid black;float:left}
.droppable{background-color:white}
.draggable{background-color:red}
Javascript(I have no clue whats going on in here):
//???
function handleDropEvent (event, ui) {
var draggable = ui.draggable;
var newtarget = this;
$('.droppable').replaceWith(draggable);
$('.droppable').last().after(newtarget);
}
//Make all elements with the draggable class draggable
$(".draggable" ).draggable({
revert: true
})
//Make all elements with the droppable class droppable areas
$(".droppable").droppable({
accept: '.draggable',
drop: handleDropEvent
})
So, I'm trying to make the draggable elements (revert on for smoothness, I think) and I tried to make droppable elements as drop areas and then used the handleDropElement (the part where I am utterly confused) to make it so you can drop a draggable element on a droppable element and make it fill the droppable element with the contents of the draggable element yet leave the draggable element where it was.
To sum that up I was trying to make draggable elements never disappear (so they clone themselves) and fill up the draggable elements.
Any ideas on how to solve this?
Aucun commentaire:
Enregistrer un commentaire