將更多事件添加到可排序列表jQuery UI

This是我已經實現的答案，它的工作原理。唯一的一點是，它不會在hover事件中應用樣式...並且反過來也需要刪除該類 - out。所以我試圖想出一個解決方案，我相信是不合適的。將更多事件添加到可排序列表jQuery UI

什麼是正確的方法，使一對夫婦互換名單允許在其中的一個（在這種情況下 - 保存結果列表中的一個），有一個hover和out事件，這樣你就可以處理爲結果列表中的div添加/刪除類？

Div_TestDrargableULLI - 持有Inital列表

Div_dropedCols - 保存結果列表。

CSS

.dropableColsBorder { 
    border:3px solid #000 
}

的.aspx

<div id="Div_TestDrargableULLI" runat="server" style="position: absolute; top:50px; width:100px; z-index:3"> 
    <ul id="UL_HeadersToOmit" style="List-Style-Type : none;"> 
    <li id="RecordNum_1" class="CssClassLi_HeadersToOmit" style="background-color:#70878F;"> 
     table Row Number 
    </li> 
    <li id="UsrsID_2" class="CssClassLi_HeadersToOmit" style="background-color:#E6E6B8;"> 
     User ID 
    </li> 
    <li id="UsrsName_3" class="CssClassLi_HeadersToOmit" style="background-color:#70878F;"> 
     User Name 
    </li> 
    <li id="UsrsDepID_4" class="CssClassLi_HeadersToOmit" style="background-color:#E6E6B8"> 
     User's Department ID 
    </li> 
    <li id="CurrMonth_5" class="CssClassLi_HeadersToOmit" style="background-color:#70878F"> 
     Current Month 
    </li> 
    <li id="CurrYear_6" class="CssClassLi_HeadersToOmit" style="background-color:#E6E6B8"> 
     Current Year 
    </li> 
    <li id="ReportLastUpdate_7" class="CssClassLi_HeadersToOmit" style="background-color:#70878F"> 
     Report's Last Update 
    </li> 
    </ul> 
</div> 
<div id="Div_dropedCols" runat="server" style="position: absolute; top:50px ; z-index:2; width:300px; height:400px; left:60%; background-color:#f0f0f0"> 
    <ul id="UL_dropedCols" style=" background-color:Yellow"> 
    <li> omitted Table Columns</li> 
    </ul> 
    <br /> 
    <p id="next">next</p> 
    <br /> 
    <p id="FinalColsSelection" style="width:70px; background-color:Red"></p> 
</div>

jQuery的

$('document').ready(function() { 
    var c = 0; 
    var taken = false; 
    var resluts = []; 
    $('#UL_HeadersToOmit').sortable({ 
    connectWith: '#UL_dropedCols', 
    out: function() { taken = true; } 
    }); 
    function changeClass(hoverd, done) { 
    var HovClass = "dropableColsBorder"; 
    var dropable = $('#Div_dropedCols'); 
    if (hoverd && taken) 
     dropable.addClass(HovClass); 
    if (done) 
     dropable.removeClass(HovClass); 
    } 
    $('#Div_dropedCols').hover(
    function() { 
     changeClass(true, false); 
    }).out(
     function() { 
     taken = false; 
     changeClass(false, true); 
     } 
    ); 
    $('#UL_dropedCols').sortable({ 
     tolerance: 'pointer', 
     connectWith: '#UL_HeadersToOmit', 
     receive: function (event, ui) { 
     var curUL = $(this); 
     resluts.push(ui.item.attr("id")); 
     } 
    }); 
    $('#next').click(
     function() { 
     var RLength = resluts.length; 
     for (var i = 0; i < RLength; i++) { 
      alert(resluts[i]); 
     } 
     }); 
    });

來源

2012-12-23 LoneXcoder

解決......我唯一的出路，我不是這標誌着一個爲正確

歡迎您，讓您自己的答案，我可以相信的有更好的選擇。

$('#Div_dropedCols').hover(

    function() { 
     changeClass(true, false); 

    }, function() { 
    taken = false; 
    changeClass(false, true); 

});

來源

2012-12-23 05:32:45 LoneXcoder

將更多事件添加到可排序列表jQuery UI

回答

相關問題