CODEWITHSUNDEEP
javascriptjqueryjquery-ui-draggable
24x7
24x7

Reputation: 409

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!

    Upvotes: 1

    Views: 365

    • Answers (2)

    Deprecated Darren
    Deprecated Darren

    Reputation: 895

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

    Upvotes: 1

    sites
    sites

    Reputation: 21795

    See here.

    Is this what you mean?

    I used sortable:

    $(function(){
    var counter = 0;

    $('.container').sortable();
    $('#creaters').click(function() {

    Upvotes: 1

    Related Questions