Question

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

如您所见，您无法将任何元素从顶部拖动到页面主体中。此外，在实际页面中，顶部有很多元素，所以我需要保持水平滚动条。任何帮助表示赞赏！

谢谢！

此处还有来自小提琴的代码：

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

您必须为droppable元素确定draggable区域。然后它只接受被拖动的元素。

为您的上一个部门添加一个ID，并将其设为draggalbe区域。

看看这个Fiddle

Answer 2

如果您将revert设置为true，则该框将仅移回其原始位置。你想做什么？

你的脚本还没有完成..如果你有一个可拖动的元素，那么你也必须有一个drop函数..

你有找教程吗？.. 这是jquery drag and drop functionality

的链接

或者看看这个thread .. 但是线程还没有解决。

Answer 3

我删除了水平滚动。

以下内容也有所改变：

在─＆GT;恢复：真的之后 - ＆gt; revert：false

您可以查看jsfiddle.net/4wG5t/13 /

有CSS和jquery UI可拖动的问题

3 个答案: