Level 51
show your code.
im guessing you are missing a wrap for divs or keys.
It should work fluidly
Feb 1, 2023
3
Level 1
Rebind Draggable & droppable after component re-render
I'm using jquery ui draggable and droppable to move students from one class to another. When a student is dropped, a livewire function gets fired to update te database and the component is rerendered.
My question is how to rebind draggable and droppable after the re-render of the component?
Level 55
you can use the wire:init directive in your HTML template and re-initialize the jquery ui functionality inside of it.
<div wire:init="initializeJqueryUi">
<!-- your draggable and droppable elements here -->
</div>
@push('scripts')
<script>
function initializeJqueryUi() {
// initialize your draggable and droppable elements here
// for example:
$('.draggable').draggable();
$('.droppable').droppable();
}
</script>
@endpush
I had similar issue before, try and see if this works.
Level 1
Thanks! Never used wire:init before and indeed, I set the code to initialize the draggable and droppable functionality in the doc ready function (out of old habit).
I tried your suggestion and that turns into an error: Unable to call component method. Public method [initializeJqueryUi] not found on component:
Does the method in the wire:init has to be a method that is defined in the component?
Please or to participate in this conversation.