JSFiddle - React, Tailwind, and code Playground

by techunter

HTML

<div id="ri-canvas">
    <div>

CSS

#ri-canvas {
    width:800px;
    height:600px;
    background-color: lightgrey;
    position:relative;
}
.ri-frame {
    background-color: #EEE;
}

JavaScript

;
(function ($, window, document, undefined) {
    var pluginName = "reimagin",
        defaults = {
            target: "ri-canvas"
        };

    function Plugin(element, options) {
        this.element = element;
        this.options = $.extend({}, defaults, options);
        this._defaults = defaults;
        this._name = pluginName;
        this.init();
    }

    Plugin.prototype = {

        init: function () {

        },

        addFrame: function (el, options) {
            $(el).append($('<div>').addClass('ri-frame ri-frame-new').css({
                width: options.riwidth,
                height: options.riheight,
                position: 'absolute',
                left: options.rix,
                top: options.riy
            }));
            $('.ri-frame-new').draggable({
                containment: 'parent',
                opacity: 0.35,
                stack: ".ri-frame",
                stop: function (event, ui) {
                    var left = ($(this).css('left').replace(/[^-\d\.]/g, '') * 1.0).toFixed(2);
                    var top = ($(this).css('top').replace(/[^-\d\.]/g, '') * 1.0).toFixed(2);
                    $(this).data('rix', left).data('riy', top).css('left', left).css('top', top);
                    console.log('x: ' + left + '/' + $(this).css('left') + ' - y :' + top);
                }
            }).resizable({
                stop: function (event, ui) {
                    var w = ($(this).css('width').replace(/[^-\d\.]/g, '') * 1.0).toFixed(2);
                    var h = ($(this).css('height').replace(/[^-\d\.]/g, '') * 1.0).toFixed(2);
                    $(this).data('riwidth', w).data('riheight', h).css('width', w).css('height', h);
                }
            }).dblclick(function () {
                console.log('edit');
            }).removeClass('.ri-frame-new');
        },
        removeFrame: function (el, options) {

        },
        toString: function (el, options) {
            return...