Raphael-jQueryui

by Adrian Dusa

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="command"></div>
<div id="mydialog">
    <div id="main"></div>
</div>
</div>

JavaScript

$( function() {
//
// to replicate:
// click on the green object (a dialog will appear)
// move the red object up and down, anywhare
// close the dialog
// click again on the green object
// now there are TWO red objects...!
// WHY...?


var cpaper = Raphael("command", 102, 32);
cpaper.rect(0, 0, 100, 30).attr({fill: "darkgreen"});
cpaper.text(10, 15, "Click me!").attr({fill: "white", "text-anchor": "start", "font-size": "14px"});

var paper = Raphael("main", 150, 300);



/* --------------------------------------------------------------------- */




var tt = {
        "sort_by": {"out": true, "incl": true, "n": true},
        "sort_sel": {"out": false, "incl": false, "n": false}
    };





/* --------------------------------------------------------------------- */




$("#mydialog").dialog({
    position: {my: "left top", at: "left+150px top+50px", of: window, collision: "flip"},
    title: "My dialog",
    minWidth: 152,
    minHeight: 300,
    closeOnEscape: false,
    autoOpen: false
});





/* --------------------------------------------------------------------- */





cpaper.rect(0, 0, 100, 30)
.attr({fill: "#fff", "fill-opacity": 0, stroke: "none"})
.click(function() {
        
    if ($("#mydialog").dialog("isOpen") == false) {
        
        $("#mydialog").dialog("open");
        
        
        draw_paper();
        
    }
});





/* --------------------------------------------------------------------- */





var lastY, absoluteY;
function draw_paper() {
    
    if ($("#mydialog").dialog("isOpen")) {
        
        
        var arect = paper.rect(50, 50, 75, 25).attr({fill: "red"});
        arect.drag(
                dragMove(),
                dragStart(),
                dragStop()
            );
        
        arect.top = 20;
        arect.bottom = 250;
        
        
        function dragStart() {
            return function() {
                lastY = 0;
                var getBB = this.getBBox();
                absoluteY =...