Question

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

在其中一个上允许使用几个可互换列表的正确方法是什么（在这种情况下 - 包含结果列表的那个），有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]);
        }
      });
    });

Answer 1

解决了...我唯一能做到的，我不是把这个标记为正确

欢迎你自己回答，因为我可以相信有更好的选择。

$('#Div_dropedCols').hover(

    function () {
        changeClass(true, false);

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

});

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

1 个答案: