css - CSS 和 jquery UI 可拖动有问题

Question

我远不是 CSS 大师，我在尝试从顶部的容器中拖动元素时遇到问题:固定到页面的主要内容。它只是向下滚动顶部容器而不是拖入主要内容。很难解释所以我做了一个 fiddle :

http://jsfiddle.net/4wG5t/11/

如您所见，您不能将任何元素从顶部拖到页面主体中。此外，在实际页面中，顶部有很多元素，因此我需要维护水平滚动条。感谢您的帮助!

谢谢!

另外还有来自 fiddle 的代码:

HTML:

<div class="fieldSectionContainer">
<div class="fieldSection">
    <ul id="fieldList">
        <!-- have loop here -->
        <li class="fieldClass">field value</li>
        <li class="fieldClass">field value</li>
        <li class="fieldClass">field value</li>
        <li class="fieldClass">field value</li>
        <li class="fieldClass">field value</li>
        <li class="fieldClass">field value</li>
        <li class="fieldClass">field value</li>
        <li class="fieldClass">field value</li>
        <li class="fieldClass">field value</li>
        <li class="fieldClass">field value</li>
        <li class="fieldClass">field value</li>
        <li class="fieldClass">field value</li>
        <li class="fieldClass">field value</li>

    </ul>


</div>
</div>


<div style="margin-top:100px">
    content below <br/><br/>
    content below  <br/><br/>
    content below  <br/><br/>
    content below  <br/><br/>
    content below  <br/><br/>
    content below  <br/><br/>
    content below  <br/><br/>
    content below  <br/><br/>
    content below  <br/><br/>
    content below  <br/><br/>
    content below  <br/><br/>

</div>

CSS:

.fieldClass {
    display:inline-block;
    background-color:white;
    border-radius:4px;
    width:200px;
    margin:5px 5px;
    padding: 1px 1px;
    text-align:center;
    border:1px solid black;      
}

.fieldClass:hover {
    cursor:move;
 }

 .fieldSectionContainer {
    overflow-y:hidden;
    overflow-x:auto;
    position:fixed !important;
    top:0;
    width:100%;
    height:100px;
 }

 .fieldSection {

    height:100px;
    width:2500px;   
    font-size:10px;
 }

Answer 1

您必须为 draggable 元素决定一个 droppable 区域。然后它将只接受拖动的元素。

为您的最后一个部门指定一个 id，并使其成为一个 draggalbe 区域。

看看这个Fiddle