CODEWITHSUNDEEP
cssjquery-uijquery-ui-draggable
turbo2oh
turbo2oh

Reputation: 2879

having trouble with CSS and jquery UI draggable

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

Upvotes: 0

Views: 88

Answers (3)

sameermanandhar
sameermanandhar

Reputation: 39

I've removed the horizontal scroll.

The following has also been changed:

before-> revert: true after -> revert: false

You can check it jsfiddle.net/4wG5t/13/

Upvotes: 0

ygssoni
ygssoni

Reputation: 7349

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

Upvotes: 1

Ariston Alcantara
Ariston Alcantara

Reputation: 232

If you put revert to true the box will just move back to its original position. What are you trying to do?

Your scripts are not yet finish.. If you have a draggable element then you must have a drop function as well..

Have you look for tutorials?.. Here's a link to jquery drag and drop functionality

Or look at this same thread.. But the thread is not yet solved.

Upvotes: 0

Related Questions