JSFiddle - React, Tailwind, and code Playground

by zhuoqiang

HTML

<input type="button" value="reload" id="reload" />
<div id="ui" />

CSS

#ui {
    background-color: white;
    border: 1px solid black;
    padding: 2em;
    margin: 2em;
}

#ui img {
    border: 3px solid gray;
    margin: 1em;
}

#ui img.yui3-dd-dragging {
    opacity: 0.8;
    border: 3px solid orange;
}

JavaScript

YUI().add('zul', function(Y) {

    function getMaxZIndex(nodes, selfNode) {
        var z = [];
        nodes.each(function() {
            // if (this.getStyle('position') != 'static')
            if (this != selfNode) {
                z.push(parseInt(this.getStyle('zIndex')) || 0);
            }
        });
        return Math.max.apply(null, z);
    }

    function toFront(node, selector) {
        if (! selector) {
            selector = 'body *';
        }

        this.setStyle('zIndex', getMaxZIndex(Y.all(selector), this)+1);
    };

    Y.Node.addMethod("toFront", toFront);

}, '0.0.1', {requiers:['node']});


YUI().use('node', 'yql', function(Y) {
    //load image from flickr

    var query = 'select * from flickr.photos.search where tags="dog" limit 3';
    // template = '<div><a href="http://flickr.com/photos/{owner}/{id}"><img src="http://static.flickr.com/{server}/{id}_{secret}_m.jpg"></a></div>';
    template = '<img src="http://static.flickr.com/{server}/{id}_{secret}_m.jpg">';

    var rootNode = Y.one('#ui');

    var q = Y.YQL(query, function(r) {
        var content = '';
        Y.each(r.query.results.photo, function(v) {
            content += Y.Lang.sub(template, v);
        });
        rootNode.setContent(content);
    }) ;

    // New query every 10s
    // Y.later(10000, q, q.send, null, true);

    Y.one('#reload').on('click', function(e) {
        q.send();
    });

});

YUI().use('dd', 'zul', function(Y) {
    var rootNode = Y.one('#ui');
    var d = new Y.DD.Delegate({
        container: rootNode,
            nodes: 'img'
    });

    d.dd.plug(Y.Plugin.DDConstrained, {
        constrain2node: rootNode
    });

    d.on(
        'drag:mouseDown',
        function(e) {
        e.target.get('node').toFront('#ui img');
    });
});