javascript 如何使一个网格拖放像在谷歌保持

3pmvbmvn  于 2023-01-16  发布在  Java
关注(0)|答案(1)|浏览(94)

我正在尝试完成一个拖放部分,就像在google keep,在vuejs中,每个div可以在不同的高度(都在相同的宽度)
example
搜索谷歌,使用一个不好用的图书馆,没有像谷歌保留的质量

jmo0nnb3

jmo0nnb31#

这是可能的与jquery用户界面。它是高质量的。
你只需要包括一个jquery库和jquery ui库,Vuejs比你需要做的更高级。
图书馆链接:

$( 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

相关问题