0

这是我已经实施的答案，并且有效。唯一的事情是，它没有在hover事件上应用样式......反过来也需要删除类 - onout。所以我试图想出一个解决方案，我确定是不合适的。

制作几个可互换列表的正确方法是允许其中一个（在这种情况下 - 保存结果列表的那个），有一个hover和out事件，所以你可以处理周围的 div 的添加/删除类结果清单？

Div_TestDrargableULLI- 保存初始列表

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]);
        }
      });
    });
4

1 回答 1

0

解决了......我唯一能做的，我没有把这个标记为正确

欢迎您做出自己的答案，因为我相信有更好的选择。

$('#Div_dropedCols').hover(

    function () {
        changeClass(true, false);

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

});
于 2012-12-23T05:32:45.010 回答