js

function generateWidget(){
    $(".widget").show();
    var widget = $("<div/>", {"class": "widget"});
    var header = $('<header><h2>Widget Test</h2><button class="close-button" onclick=closeWidget(this)>x</button></header>');

    $(header).mousedown(dragged);
    $(header).mouseup(dropped);
    $(header).mousemove(moving);

    var content = $("<section/>", {"class": "widget-content", text: "jo was geht ab?"});

    $(header).appendTo(widget);
    $(content).appendTo(widget);
    $("body").append(widget);
}

var elDragged;



function closeWidget(el){
    $(".widget").hide();
}

function dragged(event){
    event.preventDefault();
    elDragged = event;
}

function dropped(event){
    event.preventDefault();
    elDragged = null;
}

function moving(event){
    event.preventDefault();
    if (elDragged && elDragged.srcElement == event.srcElement){
    $(event.srcElement).parents(".widget" ).css("left", event.pageX- elDragged.offsetX);
    $(event.srcElement).parents(".widget" ).css("top", event.pageY- elDragged.offsetY);
    }
}