可拖动，在元素上方添加间距 [英] Draggable adding spacing above elements

问题描述

以下是代码，我的问题是，将一个元素拖到可排序区域后，将鼠标悬停在可排序区域上时添加的下一个元素会在可排序区域的顶部留出某种间距，我不想这发生.我无法在代码中找到它.

The following is the code and my problem is that after you have dragged one element to the sortable area, the next element you add upon hovering over the sortable area it ads some kind of spacing top of the sortable area and i dont want this to happen. I cannot find it in my code.

http://jsfiddle.net/j7xv4he4/

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

推荐答案

添加时不会在将鼠标悬停在可排序区域上时添加空间

The added space upon hovering on the sortable area doesn't occur when you add

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

调整后的小提琴

这篇关于可拖动，在元素上方添加间距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！