Question

I’m far from a CSS guru and am having an issue trying to drag elements from a container at the top with position:fixed to the main content of the page. It is just scrolling down the top container instead of dragging into the main content. Its difficult to explain so I made a fiddle:

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

As you can see, you can’t drag any elements from the top into the main body of the page. Also, in the actual page there are a lot of elements in the top section so I need to maintain the horizontal scrollbar. Any help is appreciated!

Thanks!

Also here’s the code from the 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

You have to decide a droppable zone for a draggable element. And then it will only accept the dragged element.

Give an id to your last division, and make it an draggalbe zone.

Have a look at this Fiddle