having trouble with CSS and jquery UI draggable

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

score 1 · Accepted Answer · answered Jan 25 '13 at 06:51

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

answered Jan 25 '13 at 06:51

ygssoni

7,219
2
23
24

Thanks! It looks like that appendTo: body part is what stops it from from scrolling in the top area and allows you to drag it into the bottom area is that correct? – turbo2oh Jan 25 '13 at 14:39
Also apparently the helper:clone part is necessary as well. – turbo2oh Jan 25 '13 at 14:45

score 0 · Answer 2 · edited May 23 '17 at 10:34

0

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.

edited May 23 '17 at 10:34

Community

1
1

answered Jan 25 '13 at 05:20

Ariston Alcantara

222
1
8

score 0 · Answer 3 · answered Jan 25 '13 at 07:25

0

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/

answered Jan 25 '13 at 07:25

sameermanandhar

39
1
2
10

Thanks but unfortunately losing the horizontal scroll doesn't allow the user to scroll to see the rest of field boxes at the top. That was part of my issue. – turbo2oh Jan 25 '13 at 14:30

having trouble with CSS and jquery UI draggable

3 Answers3