0

これは私がすでに実装した答えであり、機能します。唯一のことは、hoverイベントにスタイルを適用していないということです...そして、クラスも削除する必要があります - onout。だから私は解決策を考え出そうとしていましたが、適切ではないと確信しています。

いくつかの交換可能なリストを作成して、そのうちの 1 つ (この場合は結果リストを保持するリスト) でイベントをhover許可outする正しい方法は何ですか?結果リスト？

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 に答える