Question

以下是代码，我的问题是，在将一个元素拖动到可排序区域后，在悬停在可排序区域上时添加的下一个元素，它会在可排序区域顶部显示某种间距，我不想要这发生了。我在我的代码中找不到它。

        <meta charset="UTF-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

<style>
.wrapper { width: 700px; height: 500px; margin: auto; }
.wrapper > h5 { padding: 0; margin: 0; }
.wrapper > div { margin-bottom: 15px; border: 1px solid #aaa; }
.item-wrapper { position: relative; padding: 3px; color: #555; display:inline-block;padding:10 25px;}
.item-wrapper:nth-child(even) { background-color: #f8f8f8; }

.drag-handle { position: absolute;  left: 0; right: 0; top: 0; bottom: 0; cursor: move; }
.item-container { position: relative; text-align: center; cursor: move; }
.drop-container .item-container { cursor: default; }
.sort-container{height:50px;}
.sort-container .item-container {  }
.sort-container div{display:inline-block;}
.item-wrapper.mx-state-moving { background-color: #fcefa1; color: #000;  }
.drag-container .item-wrapper.mx-content-hover { background-color: #cce0ff; color: #000;}
.drop-container.mx-content-hover { background-color: #ccff99; }
.sort-container .drag-handle.mx-content-hover { border-color: #cce0ff; }
.sort-container .item-wrapper.mx-content-hover { color: #000; }
</style>

<br/>

<div class="wrapper">

   <h5>Draggable</h5>
   <div class="drag-container ui-corner-all">
      <div class="item-wrapper">
         <div class="item-container">hǎo</div>
      </div>

      <div class="item-wrapper">
         <div class="item-container">?</div>
      </div>


      <div class="item-wrapper">
         <div class="item-container">ma</div>
      </div>

      <div class="item-wrapper">
         <div class="item-container">nǐ</div>
      </div>


   </div>


   <h5>Sortable</h5>
   <div class="sort-container ui-corner-all">


   </div>


</div>

<script>
   var items = 4;
   function fixHelper( e, ui ) {
      var $ctr = $(this);
      ui.helper
         .addClass('mx-state-moving ui-corner-all')
         .find('.mx-content-hover')
            .removeClass('mx-content-hover')
            .end();
   }

   function toggleHover( e ) {

   }

   sdCfg = {
         cursor: 'move',
         zIndex: 200,
         opacity: 0.75,
         handle: '.drag-handle',
         scroll: false,
         containment: 'window',
         appendTo: document.body,
         helper: 'clone',
         start: fixHelper
   };

   $('.drag-container')
      .find('.item-wrapper').draggable({
         cursor: 'move',
         zIndex: 200,
         opacity: 0.75,
         scroll: false,
         containment: 'window',
         appendTo: document.body,
         helper: 'clone',
         connectToSortable: '.sort-container',
         start: fixHelper
         }).hover( toggleHover );



   $('.sort-container')
         .sortable({
            containment: 'parent',
            handle: '.item-container',
            tolerance: 'pointer',
            helper: 'clone',
            start: fixHelper,
            update: function ( e, ui ) {
                  if ( ui.item.find('.drag-handle').length == 0 ) {
                     //$('.drag-container .item-container').html('Item ' + (++items));
                     ui.item
                        .find('.item-container')
                           .before( $('<div class="drag-handle">') )
                           .parent()
                        .draggable(sdCfg)
                        .hover( toggleHover )
                        .find('.drag-handle')
                     $(this).sortable('option', 'containment', 'parent');
                  }
               }
      }).find('.item-wrapper')
         .draggable(sdCfg)
         .hover( toggleHover )
         .find('.drag-handle');


</script>

Answer 1

添加

时，不会在悬停在可排序区域时添加的空间

.sort-container .item-wrapper {float:left;}

调整后的Fiddle

可拖动在元素上方添加间距

1 个答案: