jQuery UI - overflow-y:scroll 容器中的可拖动项目

Posted 2023-05-08

【中文标题】jQuery UI - overflow-y:scroll 容器中的可拖动项目

【英文标题】：jQuery UI - Draggable items in overflow-y:scroll container

【发布时间】：2017-02-28 02:40:38

【问题描述】：

我有一个网页，其中右侧有可拖动到左侧列中的项目。效果很好，除了我想在右侧的项目容器上设置固定高度或最大高度，并应用了溢出-y：滚动。当我尝试执行此操作时，项目会拖到目标列下方，而不是应在顶部。如果我从项目容器 div 中取出溢出属性，它就可以正常工作。

有人能指出我哪里出错了吗？如何获得可滚动的可拖动列表？

JS Fiddle HERE 显示我的意思... https://jsfiddle.net/bvxxetot/

这是我用来初始化可拖动/可放置区域的 javascript 代码

HTML

<div id="tmpl-view-builder-container">

  <div id="tmpl-view-preview-container">
    <div class="droppable">


    </div>

  </div>

  <div id="tmpl-view-legend-container">
    <h3>Available Fields</h3>
    <div id="tmpl-view-legend-item-container">    
        <ul>
          <li>Field 1</li>
          <li>Field 2</li>
          <li>Field 3</li>
          <li>Field 4</li>
          <li>Field 5</li>
          <li>Field 6</li>
          <li>Field 7</li>
          <li>Field 8</li>
          <li>Field 9</li>
          <li>Field 10</li>
      </ul>
    </div>      
  </div>

</div>

CSS

.droppable  border:1px dashed #000000; width:75%; float:left; height:400px;

#tmpl-view-legend-container 
  position:absolute;
  right:20px;
  top:0px;
  height:400px;
  overflow-y:scroll;


#tmpl-view-legend-container ul  list-style-type:none; padding:0; 
#tmpl-view-legend-container ul li  background:#CCCCCC; margin-bottom:10px; padding:7px 10px; cursor:pointer; 

JS

$(function() 
    $('.droppable').droppable(
            accept:'#tmpl-view-legend-item-container li',
        hoverClass: 'hovered',
        drop: testDropFunction
    );

    $('#tmpl-view-legend-item-container li').draggable(
            stack: '#tmpl-view-legend-items li',
        cursor: 'move',
        revert: true,
        appendTo: 'body'
    );
);


function testDropFunction(event, ui) 
    alert('Testing!');

谢谢！

【参考方案1】：

您可以使用helper: 'clone' 获得此功能，但是您需要添加一些代码来修复一些问题。

在可拖动构造函数中：

    helper: 'clone',
    start: function(e, ui) 
        ui.helper.width($(this).width());
        $(this).css('visibility', 'hidden');
    ,
    stop: function(e, ui) 
        $(this).css('visibility', '');
    

在 CSS 中：

li.ui-draggable.ui-draggable-handle.ui-draggable-dragging  list-style-type:none; background:#CCCCCC; margin-bottom:10px; padding:7px 10px; cursor:pointer; 

根据您的代码，这是一个有效的 jsfiddle：https://jsfiddle.net/ahx7urbk/