JSFiddle - React, Tailwind, and code Playground

by QuadCodes

HTML

<div id="canvas">
<div class="draggable" class="draggable ui-widget-content">
    <span class="pos"></span>
</div>

<div class="draggable2" class="draggable ui-widget-content">
    <span class="pos"></span>
</div>
    
    <div class="draggable" class="draggable ui-widget-content">
    <span class="pos"></span>
</div>

<div class="draggable2" class="draggable ui-widget-content">
    <span class="pos"></span>
</div>

</div>

CSS

#canvas {width: 500px;height: 500px;}
    .draggable { cursor: row-resize; height: 4px; width: 100%; border-top: 1px red dotted;position:absolute}
    .draggable2 { cursor: col-resize; width: 4px; height:100%; border-right: 1px red dotted;position:absolute}

.pos {position:absolute;width: 100px;font-size: 12px;display:none}

JavaScript

$(function() {
       $( ".draggable" ).draggable({ 
           axis: "y", 
           containment: "#canvas", 
           drag: function() {
                var position = $(this).position();
                var yPos = $(this).css('top');
               $(this).find($('.pos')).text('Y: ' + yPos);
           },
           start: function() {
               $(this).find($('.pos')).css('display','block');
           },
           stop: function() {
               $(this).find($('.pos')).css('display','none');
           }                                   
        });
    
       $( ".draggable2" ).draggable({
           axis: "x",
           containment: "#canvas",
           drag: function() {
                var position = $(this).position();
                var xPos = $(this).css('left');
                $(this).find($('.pos')).text('X: ' + xPos);
           },
           start: function() {
               $(this).find($('.pos')).css('display','block');
           },
           stop: function() {
               $(this).find($('.pos')).css('display','none');
           }            
        }); 
 
 
 

    
});