Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>RxJS</title>
</head>
<body>
    <div class="container">
        <div id="box"><span>Drag Me</span></div>
    </div>
​
    <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.11.7/TweenMax.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/rxjs/2.3.22/rx.all.js"></script>
​
</body>
</html>
 
#box {
    display: table;
    position: absolute;
    top: 20px;
    left: 20px;
    width: 100px;
    height: 100px;
    background-color: deeppink;
    border-radius: 8px;
    box-shadow: 0 3px rgb(199, 3, 109), 0 3px 5px rgba(0, 0, 0, 0.29), 0 -1px rgba(255, 255, 255, 0.23) inset;
    transition: transform 0.5s;
    cursor: move;
}
​
#box::after {
    content: '';
    display: block;
    position: absolute;
    border-radius: 8px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    transition: box-shadow 0.5s;
}
​
#box.hovering::after {
    box-shadow: 0 30px 20px rgba(0, 0, 0, 0.23);
}
​
#box.hovering {
    transform: scale(1.2);
    -webkit-transition-timing-function: cubic-bezier(0.575, 0.005, 0.460, 1); /* older webkit */
    -webkit-transition-timing-function: cubic-bezier(0.575, 0.005, 0.460, 1.650);
    -moz-transition-timing-function: cubic-bezier(0.575, 0.005, 0.460, 1.650);
    -o-transition-timing-function: cubic-bezier(0.575, 0.005, 0.460, 1.650);
    transition-timing-function: cubic-bezier(0.575, 0.005, 0.460, 1.650); /* custom */
​
​
​
​
}
​
#box span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    font-family: sans-serif;
    color: white;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.34);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
 
$box = $('#box')
mouseup_events = Rx.Observable.fromEvent($box, 'mouseup')
mousemove_events = Rx.Observable.fromEvent(document, 'mousemove')
mousedown_events = Rx.Observable.fromEvent($box, 'mousedown')
​
source = mousedown_events.flatMap (event)->
    start_pageX = event.pageX
    start_pageY = event.pageY
    start_left = parseInt($box.css('left'))
    start_top = parseInt($box.css('top'))
    $box.addClass('hovering')
​
    mousemove_events.map (e)->
        return {
        left: start_left + (e.pageX - start_pageX)
        top: start_top + (e.pageY - start_pageY)
        }
    .takeUntil(mouseup_events)
​
mouseup_events.subscribe -> $box.removeClass('hovering')
source.subscribe (pos)-> TweenLite.set($box, left: pos.left, top: pos.top)
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x