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" >
 <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>

Call Queue Cart

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

JQuery Code

var table = $('#tblTest');
 helper: function(event) {
 return $('<div><table></table></div>').find('table').
 //scope: 'cart-items',
 revert: 'invalid'

 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>';


You may also like