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 = '<p>Joepie het werkt</p>';;
}
});
$('#insert li').draggable({
revert: true,
connectToSortable: '#formulier',
drop: function(){
alert('hi');
}
});
$('#insert ul', '#insert li').disableSelection();
});
[/code]
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
