如何像在 google keep 中一样拖放网格

Question

I am trying to accomplish a drag and drop section like in google keep, in vuejs, where every div can be in a different height(all in the same width)

example

Searched google, used a library that didn't work well, nothing like the quality of google keep

Answer 1

It is possible with jquery UI. It is high quality.

You just need to include a jquery library and jquery ui library. Vuejs is more advanced than what you need to do.

Library links:

 $( function() { $( "#draggable" ).draggable(); $( "#droppable" ).droppable({ drop: function( event, ui ) { $( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped;" ); } }); } );

 <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <div id="draggable" class="ui-widget-content"> <p>Drag me to my target</p> </div> <div id="droppable" class="ui-widget-header"> <p>Drop here</p> </div>

Documentation