jquery test03

now with positions/drag and create new boxes

by dirkk0

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"></script>
<div id="demo">
    
    <button>A button element</button>
    <div id="info">info</div>
    
    <div id="d1" class="dstyle">drag me</div>
    <div id="d2" class="dstyle">drag me, too</div>
    
    
</div>

CSS

.dstyle
{
    width: 50px;
    height: 50px;
    background: #ffb;
    padding: 10px;
    border: 2px solid #999;
}

JavaScript

$(function() {
    $("#demo").append("<div class=dstyle>aaa</div>");
    $(".dstyle").draggable({

        // Find original position of dragged image.
        start: function(event, ui) {

            // Show start dragged position of image.
            var Startpos = $(this).position();
            $(this).text("START: \nLeft: " + Startpos.left + "\nTop: " + Startpos.top);
        },

        // Find position where image is dropped.
        stop: function(event, ui) {

            // Show dropped position.
            var Stoppos = $(this).position();
            $(this).text("STOP: \nLeft: " + Stoppos.left + "\nTop: " + Stoppos.top);
        }
    });
    // $('#test').delay(1000).fadeOut();
    $("#knopp", ".demo").button();
    $("#knopp, button").click(function() {
        $("#demo").append("<div class=dstyle>new</div>");
        $(".dstyle").draggable();
    });
});