我正在从事Laravel Livewire项目。
在一个页面上，有一个通过研讨会的循环，在每个循环中，有一个通过参加研讨会的学生的循环。管理员应该能够将学生从一个研讨会拖到另一个研讨会。我正在尝试使用jQuery draggable dropable来实现这一点。

<div wire:init"bindjquery">
                 @foreach($workshops as $workshop)
                   <div class="droppable" id="{{ $workshop->id }}">
                   @foreach($workshop->students as $student)
                    <div id="{{$student->id}}" data-event="{{$workshop->id}}" 
                    class="draggable">{{$student->name}}</div>
                   @endforeach
                  </div>
                @endforeach
    </div>

在组件中：

public function bindjquery(){
        
        $this->emit('bindjquery');
    }

在刀片模板中：

window.livewire.on('bindjquery', () => {
         
            $( ".draggable" ).draggable({
            });
   $( ".droppable" ).droppable({
   drop: handleDropEvent,
 });
 
 
              
              
         })

         function handleDropEvent(event,ui) {
  
    
     var dragId = ui.draggable.attr("id");
     var previousevent = ui.draggable.data("event");
     var dropId = $(this).attr("id");
     
     Livewire.emit('userdropped', dragId, dropId, previousevent);
    
 
   }

在石灰线组件中：

protected $listeners = ['userdropped' => 'userdropped'];

    public function userdropped($par1, $par2, $par3){
        $huidigevent = Event::find($par3);
        $huidigevent->gebruikers()->detach($par1);

        $nieuwevent = Event::find($par2);
        $nieuwevent->gebruikers()->attach($par1);

       
    }

这工作正常。但是只有在页面加载后的第一次拖动移动才是可见的。
在第一次移动之后，数据库得到更新，组件重新渲染。我仍然可以抓住一个学生，移动到另一个车间，然后放下他。所有的逻辑工作，实际拖动是不可视化的。
有什么问题吗？
可能相关：我也在那个页面上使用Alpine JS。