可排序的jQuery将div拖入td

Question

在我的项目中，我试图做一个可排序的表格。 我尝试了很多，但没有找到解决方案。

问题1：我无法将div拖到空td。 问题2：我试图在拖动时从数据属性中获取数据。 （本）无法正常工作......

我的jsfiddle：http://jsfiddle.net/aq98v/6/

这里是下面的代码：

的Javascript：

$(function(){ 
    $("#dropable").sortable({ 
     items : ".drag", 
     start: function() { 
      displayValue(this); 
     }, 
     stop: function() { 
      hideValue(); 
     }, 
     receive: function() { 
      dropped(this); 
     } 
    }); 
}); 

function toggleNumbers(e) { 
    var time = $(e).data("time"); 
    var visitor = $(e).data("visitor"); 
    $(".lol").html("selected time ="+time+" selected visitor ="+visitor); 
} 

function hideValue() { 
    $(".lol").html("Reboot"); 
} 

function dropped(e) { 
    var time = $(e).data("time"); 
    var visitor = $(e).data("visitor"); 
    $(".lol").html("Success Dropped!!! time ="+time+" And visitor ="+visitor); 
} 

HTML很长的jsfiddle。我在这里做一个短的。

<table> 
    <thead> 
     <tr><th class="col-lg-1">Monday</th></tr> 
    </thead> 
    <tbody id="dropable"> 
     <tr class="droping"> 
      <td> 
       <div class="drag" data-time="09:00" data-visitor="12"> 
        <span class="time">09:00</span> 
        <span class="visitor">12</span> 
       </div> 
      </td> 
     </tr> 
    </tbody> 
</table> 

谢谢你的回应！

Answer 1

修正：http://jsfiddle.net/aq98v/22/

$(function(){ 
     $(".droping").sortable({ 
       connectWith:"td", 
       placeholder: "ui-state-highlight" 
     }).disableSelection(); 
});