Question

I added elements to green div with button, then I want to drag them do red div. While dragging (just moving to the element red) it moves (or little jumps). Look at my fiddle: http://jsfiddle.net/KzWkS/ and try it.

   jQuery(document).ready(function() {

        $('#pridaj').click(function(){
             $("<div style='border:1px solid black; position: relative;padding:3px;margin:2px;width:190px;float:left;' class='keyword'>"+$('#newArea').val()+"</div>").appendTo('#green');
            $('#newArea').val('');

        });
         $('.keyword').live('mouseover',function(){
            $('.keyword').draggable({connectToSortable:'#red'});
         });
    });

     $(function() {
         $( "#red" ).sortable();
         $( "#red" ).disableSelection();
    });

And.. If I want to drag them back, it does these thing too…

Maybe there is a problem with positioning (absolute/relative), but I haven’t found yet.

Answer 1

You don’t need to keep adding the .draggable just make your green and red as sortable columns and link them.

I tried condensing this down and doing it a slightly different way.

BTW it helps to keep your CSS seperate and not inline. It will help to keep things easier to read, maintain and change.

<style type="text/css">  
    #pridaj {
        border:1px solid gray;
        background: white;
        border-radius: 2px;
        margin-left: 5px;
        margin-bottom: 2px;
    }      
    #green, #red {
        margin: 2px;
        margin-top: 8px;
        height:100px;
        width:200px;
    }
    #green {
        background: green;
    }
    #red {
        background: #ff9999;
    }
    .keyword {
        border:1px solid black;
        position: relative;
        padding:3px;
        margin:2px;
        width:190px;
        float:left;
    }
</style> 

<input type='text' id='newArea'/><button id='pridaj'>pridaj kluc slovo</button><br />
<div id='green' class="sortable"></div>
<div id='red' class="sortable"></div>

<script type="text/javascript">
$(function() {
    $(".sortable").sortable({
        connectWith: ".sortable"
    });

    $('#pridaj').click(function() {
        $("<div class='keyword'>" + $('#newArea').val() + "</div>").appendTo('#green');
        $('#newArea').val('');

    });

});           
</script>