Turning a div into a draggable element that can be snapped into position

I've been reviewing jQuery and Javascript for quite some time now - but am having difficulty getting into the mindset of programming for them. After finding a previous stackoverflow thread and modifying it to the specifications I had in mind for this learning excercise, I'm having difficulty turning each of the divs into sortable/draggable elements.

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>seed</title>  
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script>
<style type='text/css'>
    .redbox {
    position: relative;
    display: block;
    width: 780px;
    height: auto;
    background: red;
    }

    .togglecontainer
    {

        width: 780px;
        height: auto;   
    }

    .handler {
        width: 780px;
        height: auto;
        background: yellow;
    }  

    .container {
        position: relative;
        width: 780px;
        height: 780px;
        background: blue;
    }

    .complete { text-decoration: line-through; color: grey;
    }

    input { padding:2px; border:1px solid #999; border-radius:4px; -moz-border-radius:4px; -web-kit-border-radius:4px; -khtml-border-radius:4px; font-size:20px;}


</style>
<script type='text/javascript'>
// taken from http://jsfiddle.net/davidThomas/XsCAN/6/ 
// http://stackoverflow.com/questions/4639487/remove-specific-box-with-jquery
$(function(){
    var counter = 0;

    $('#creaters').click(function() {
        counter++;
        var redbox = $('<div class="redbox"><div class="handler"> ' + (counter) + ')<input name ="thestep" type="text" value="" maxlength="255" size="65" /></div><div class="togglecontainer"></div></div>').appendTo('.container'),
            appendbtn = $('<button class="appendbtn">Add a link to a pic/vid</button>').appendTo(redbox.find('.togglecontainer')),
            togglebtn = $('<button class="togglebtn">Hide options</button>').appendTo(redbox.find('.handler')),
            deletelistbtn = $('<button class="deletelistbtn">X</button>').appendTo(redbox.find('.handler'));

        redbox.draggable({
            handle: '.handler'
        });

        appendbtn.click(function() {
            var elems = $('<div><input value="some value"  type="text" class="inputfield' + (counter) + '"/>' + '<input type="button" class="removebtn" value="x" id="removebtn"' + (counter) + '"/>' + '</div>').insertBefore(redbox.find('.togglecontainer'));
        });

        $('.removebtn').live('click', function() {
            $(this).parent().remove();
        });

        $('.deletelistbtn').live('click', function() {
            $(this).closest('.redbox').remove();
        });


        togglebtn.click(function() {
            var that = this;
            $('.togglecontainer', redbox).toggle(10, function() {
                var txt = $(that).html();
                $(that).html((txt == 'Hide options') ? 'add media' : 'Hide options');
            });
        });
        togglebtn.trigger("click");

    });

});
</script>
</head>
<body>
  <button id="creaters">Add a Step</button>
<div class="container"></div>
</body>
</html>

currently the code turns each of .redbox classes into draggable jquery elements, however they do not "snap" into position, stay within the bounds of the container div, or move the surrounding elements beneath them after being dragged into their new position.

So far, I've tried initiating a element inside the container div and turning each of the redbox elements into an

  • statement, but it has proven fruitless.

    I have also experimented with both the draggable() and sortable() methods but am having difficulty.

    Any help would be greatly appreciated!

    thank you!

    Answers


    See here.

    Is this what you mean?

    I used sortable:

    $(function(){
        var counter = 0;
    
        $('.container').sortable();
        $('#creaters').click(function() {
    

    Well i dont see you adding a snap, and containment to element option in the draggable function.

    redbox.draggable({
         handle: '.handler',
         snap : '.container',
         containment : '.container'
    });
    

    Need Your Help

    Remove strange blue box in visual studio

    visual-studio visual-studio-2012

    This blue rectangle is fixed on the screen. Sometimes growing, shrinking and changing place. tried the answer to this question: In the Visual Studio SQL editor, how do I get rid of the boxes? a...

    Difference between PHP and PHP5

    php oop

    I want to study OOP-related PHP, mainly for mashups and some development. I started with PHP and MySQL.

  • About UNIX Resources Network

    Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.