JSFiddle - React, Tailwind, and code Playground

by Rusln

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id="div1">
    <div id="thing">thing1</div>
    <div id="thing">thing2</div>
    <div id="thing">thing3</div>
</div>
<div id="div2">
    <div id="row">row</div>
    <div id="row">row</div>
    <div id="row">row</div>
</div>
<div id="div3">
    <div id="photo">photo1</div>
    <div id="photo">photo2</div>
    <div id="photo">photo3</div>
</div>

CSS

#div1 {
    background:red;
    width:200px;
    height:400px;
    float:left;
}
#div2 {
    background:yellow;
    width:300px;
    height:400px;
    float:left;
}

#div3 {
    background:green;
    width:200px;
    height:400px;
    float:left;
}
#photo {
    width:90px;
    height:60px;
    background:black;
    color:#fff;
    margin-top:9px;
}
#thing {
    width:70px;
    height:50px;
    background:blue;
    margin-top:3px;
}
#row {
    width:100%;
    margin-top:5px;
    background:#ccc;
    height:60px;
}
        
}

JavaScript

$('#thing').draggable();
$('#thing').resizable();
$('#thing').sortable();

$('#row').dropable ({
    accept:('#thing');
    //how to make it sortable horizontaly?
});

$('#photo').draggable();
$('#div1').dropable({
    accept:('#photo');
    //how to make it sortable verticaly?
    //how to make when accept #photo to change ID to #thing and make it sortable there
}