JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jcscript.com/data/js/jCanvaScript.1.5.18.min.js"></script>
<canvas id="canvas" width="500" height="500">
</canvas>

JavaScript

jc.start("canvas",true);
var dummy = null;
jc.circle(200,200,50,true).draggable(onDrag).mouseup(onMouseUp);

function onDrag(){
    var pos = this.position();
    if (pos.x < 100 && dummy == null) {
        showDummy.apply(this);
    }
    if (pos.x > 100 && dummy != null){
       clearDummy.apply(this); 
    }
}

function onMouseUp(){
    if (dummy != null) {
        clearDummy.apply(this);
    }
}

function showDummy(){
    var pos = this.position();
    console.log(pos.x)
    dummy = this.clone().translateTo(100, pos.y);
    this.opacity(0);
}
function clearDummy(){
    var pos = dummy.position();
    this.translateTo(pos.x, pos.y)
    dummy.del();
    dummy = null;
    this.opacity(1);
}