JSFiddle - React, Tailwind, and code Playground

by Daniel Pegues

HTML

<div class="draggable_wp">
        <div class="wp_img">
            <img src="http://images5.fanpop.com/image/photos/31300000/Spongebob-spongebob-squarepants-31312711-1280-1024.jpg"class="draggable_el">
        </div>
        <div class="btn">
            <div class="draggable_btn_resize"></div>
        </div>
    </div>

CSS

.draggable_wp{
    position:absolute;
    width:auto;
    height:auto;
    left: 130px;
    top: 100px;
}
.wp_img img{
    width: 100px;
    height: 20px;
}
.draggable_btn_resize{
    position: absolute;
    width: 15px;
    height: 15px;
    right: 0;
    bottom: -23px;
    background-color: red;
}

JavaScript

$(function(){
var re_dragging = false, re_om_x, re_om_y, re_o_x, re_o_y, re_n_x, re_n_y,width;
	function resize(resize_btn){
		resize_btn.mousedown(function(e){
			e.preventDefault();
			e.stopPropagation();
			re_dragging = true;
			re_om_x = e.pageX;
			re_om_y = e.pageY;// origin mouse postion
            
			target_wp = $(e.target).closest('.draggable_wp').find('.draggable_el');
            width = target_wp.width();
		});
		$(document).mousemove(function(e){
			if(re_dragging){
                console.log(target_wp.width());
                console.log((e.pageX - re_om_x));
				target_wp.width((e.pageX - re_om_x) + width);
                width =(e.pageX - re_om_x) + width
                re_om_x = e.pageX;
                
			}
		});
		$(document).mouseup(function(e){
			re_dragging = false;
		});
	};
	var resize_btn = $('.draggable_btn_resize');
	resize(resize_btn);


});