How To Make Sortable Drag and drop Using Doctrine Symfony

In order to implement this functionality you will need a jquery plugin to make the drag and drop functionality to work. For this tutorial I will use jquery ui the sortable plugin.

Theoretically we must take the next steps do implement this functionality.

  1. Create the list with all posts/list you need to sort.
  2. Create a jquery function using drag and drop plugin to get the new position of the element.
  3. Send the id if your post and the new position to controller in order to update its position in the database

It would be quite difficult to update the position for all posts after a post changed its position, but fortunately we don't need to worry about this thing because doctrine has a lot of nice functions to help us.

Drag and drop doctrine functionality

First of all let's create the jquery function to send the post id and the new position to controller.

jQuery('.my_list').sortable({
  stop:function(event, ui){
  var element_dd = ui.item[0].attributes.element.value,
      position = ui.item.index(),
      link = base_url+'/update/post/'+element_dd;
  jQuery.ajax({
    type:"POST",
    url:link,
    data:{
      'position':position
    },
    success:function(result){
      console.log(result);
    },
    error:function(error){
      
    }
  });
  }
});

 

You will have to change the link var and add yours. Next in the controller file we will have to create the following function to update the post position.

public function update_post_position(Request $request){
  $post_id = $requrest->get('post_id');
  $position = $request->get('position');

  $em = $this->getDoctrine()->getManager();
  $post = $em->getRepository(Post::class)->find($post_id);
  $post->setPosition(position);
  try{
      $em->flush();
      return new jsonresponse(true);
  }catch(\PdoException $e){

  }
}

I think it's pretty clear what is happening in the above function, now, the last and maybe the most important change we need to do is in the entity class where we will have to create the position column in a specific way. Open you entity file and add the following piece of code:

/**
 * @Gedmo\SortablePosition
* @ORM\Column(name="position", type="integer", length=100)   
 */
private $position;

The above code will make for you the entire functionality of change the position for all the posts after an element changed its position. In order to be able to use the SoratablePosition you will have to install a doctrine extension, anyway it's very easy just look on google how to install it. 
Also you will have to include this in your entity file:

use Gedmo\Mapping\Annotation as Gedmo;

Last thing to do to make this working is when you select your posts to send to the frontend you will have to order them by the new column (position).

0 0 votes
Article Rating
Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
megane
megane
4 years ago

Hi , first thank you for this tuto , this is exaclty what i was searching but there are some missing element for beginner like me and it’s not working (maybe because i don’t know how to do ut) . I have some questions , Can you help me please ? .

I’m using symfony 4 and gedmo is installed and the sortable work (with html5sortable) but it doesn’t keep the order .

1) how you define the link in the jquery ? Yours is ” link = base_url+’/update/post/’+element_dd;” how i know mine ?
2) I create a wishposition for the position so i’m not sure which position i need to change in your function
3) what route do you use ? for exemple mine is /wish , it’s where i have my wish i want to sortable

1
0
Would love your thoughts, please comment.x
()
x