I have a straightforward website where I need to implement the ability to drag and drop styled DIV elements between two containers. Utilizing JQueryUI's sortable function, this behavior was successfully achieved with the following code:
$("#active-container").sortable({connectWith: "#inactive-container"});
$("#inactive-container").sortable({connectWith: "#active-container"});
To add droppable DIV elements to the containers upon button click, I use the createDeviceDiv function like so:
function createDeviceDiv (deviceObject, className){
var div = document.createElement('div');
div.id = deviceObject.deviceId;
div.className = className + ' draggable="true"';
div.textContent = deviceObject.deviceName;
return div;
}
The CSS for the elements is defined as follows:
.active-device-element
{
width: 200px;
height: 40px;
border: 2px solid #666666;
margin: 10px;
background-color: lightgreen;
cursor: move;
border-radius: 25px;
text-align: center;
vertical-align: middle;
line-height: 35px;
-webkit-user-select: none;
}
.inactive-device-element
{
width: 200px;
height: 40px;
margin: 10px;
border: 2px solid #666666;
background-color: floralwhite;
cursor: move;
border-radius: 25px;
text-align: center;
vertical-align: middle;
line-height: 35px;
-webkit-user-select: none;
}
#active-container, #inactive-container
{
background-color: lightgrey;
min-height: 100px;
}
The corresponding part of the index.html page (using Twitter bootstrap 3) looks something like this:
<div class="row">
<div class="col-xs-6">
<h2>Active Devices</h2>
<p>The following devices are currently listed as active.</p>
<div id="active-container">
</div>
</div>
<div class="col-xs-6">
<h2>Inactive Devices</h2>
<p>The following devices are currently listed as inactive.</p>
<div id="inactive-container">
</div>
</div>
</div>
Even though dragging and dropping between containers functions properly, the dropped element retains its original style. To indicate modifications by changing the background color or style, perhaps to '.modified-device-element', guidance on the best approach would be greatly appreciated.
Any assistance provided will be immensely helpful. Thank you.