Call Queue interface Design for auto Dialer using JQuery

I was just working on developing a simple Asterisk based auto-dialer. I came up with a design for the interface using JQuery Drag ‘n Drop feature.


see Demo

sample table

<div id="MyParentDiv">
 <h1>Highlight table row record on hover - jQuery</h1>
 <!--<div> -->
 <table id="tblTest" >
 <thead><tr><th>No</th><th>Name</th><th>Age</th><th>Phone</th></tr></thead>
 <tbody>
 <tr><td>1</td><td>Yong Mook Kim</td><td>28</td><td>0162103947</td></tr>
 <tr><td>2</td><td>Low Yin Fong</td><td>29</td><td>035468798</td></tr>
 <tr><td>3</td><td>Ah Pig</td><td>18</td><td>04455465</td></tr>
 <tr><td>4</td><td>Ah Dog</td><td>28</td><td>0175421354</td></tr>
 <tr><td>5</td><td>Ah Cat</td><td>28</td><td>0126241355</td></tr>
 </tbody>
 </table>
 </div>

Call Queue Cart

<div id="cart_container">
 <div id="cart_title">
 <span>Outbound Queue for Auto Dialer</span>
 <div></div>
 </div>      
 <div id="cart_toolbar">
 <div id="cart_items"></div>
 </div>
 </div>

JQuery Code

$(document).ready(function(){
var table = $('#tblTest');
 table.find('tr.selRow').draggable({   
 helper: function(event) {
 return $('<div><table></table></div>').find('table').
 append($(event.target).closest('tr').clone()).end().insertAfter(table);
 },
 //scope: 'cart-items',
 revert: 'invalid'
 });

$("#cart_items").droppable({
 accept: ".selRow",
 activeClass: "drop-active",
 hoverClass: "drop-hover",
 drop: function(event, ui) {
 var item = ui.draggable.html();
 var itemid = ui.draggable.attr("id");
 var Name = ui.draggable.find('.name').html();
 var Phone = ui.draggable.find('.phone').html();
 var html = '<div>';
 html = html + '<div>';
 html = html + '<a onclick="remove(this)">&times;</a>';
 //html = html + '<label>8</label>';
 html = html + '<div/>'+htmImage;
 html = html + '<br />'+'<label>'+Name+'</label>';
 html = html + '<br />'+'<label>'+Phone+'</label>';

 $("#cart_items").append(html);
 }
 });
});

You may also like