Drag a label, drop a form field
Hi there,
I am trying to create a drag-and-drop-system where someone can drag a
label
(e.g. 'Name') and drop it in a sortable as a form-field, but I don't
know
how to do this.
Here is an example: http://harmen.no-ip.org/enquete/
As you can see its not working very well...
- The style of the draggables on the left side is changing when you
hover
them on the sortable
- The position of the draggables is still absolute when you drop them
in the
sortable
- You drop a copy of the draggable, what I want to do is to drop an
input-field for example.
Here is my code so far:
[code]
$(document).ready(function(){
$('.vak').mouseover(function(){
$(this).css('border-color', '#CFCFCF');
$(this).children('.handler').css('background-image',
"url('images/grip.gif')");
}).mouseleave(function(){
$(this).css('border-color', '#FFF')
$(this).children('.handler').css('background-image', 'none');
});
$('.handler').mouseover(function(){
$(this).css('cursor', 'move');
}).mouseleave(function(){
$(this).css('cursor', 'default');
});
$('#formulier').sortable({
axis:'y',
placeholder: 'placeholder',
forcePlaceholderSize: true,
receive: function(event, ui){
$(ui.sender)[0].innerHTML = 'Joepie het werkt
';;
}
});
$('#insert li').draggable({
revert: true,
connectToSortable: '#formulier',
drop: function(){
alert('hi');
}
});
$('#insert ul', '#insert li').disableSelection();
});
[/code]