亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何通過拖放 Jquery UI 更改數據屬性?

如何通過拖放 Jquery UI 更改數據屬性?

陪伴而非守候 2023-11-12 14:49:31
我制作了一個 jQuery 函數,用戶可以在其中拖放 div。但我想在用戶拖放它們時更改它們的數據屬性,例如-<div data-num="1">one</div><div data-num="2">Two</div><div data-num="3">Three</div><div data-num="4">Four</div>每當用戶拖動 div 3 并將其放在頂部時,它應該將其 data 屬性更改data-num="3"為data-num="1",之后的 div 應data-num=2根據其位置將其 data 屬性更改為 等等我正在嘗試什么jQuery( "#app" ).sortable({     update: function(a, b) {         parseInt(jQuery(a).attr("data-num"),10) - parseInt(jQuery(b).attr("data-num"),10);    }          }); 
查看完整描述

2 回答

?
臨摹微笑

TA貢獻1982條經驗 獲得超2個贊

為了實現您的目標,您可以將事件處理程序掛鉤到stop可排序的事件。然后您可以循環遍歷每個子元素div并#app更新data-num以匹配元素的索引。嘗試這個:


jQuery($ => {

  $("#app").sortable({

    stop: () => {

      $('#app > div').each((i, el) => $(el).data('num', i + 1));

    }

  });


  // only for testing...

  $('button').on('click', () => {

    $('#app > div').each((i, el) => console.log(`${el.textContent} - ${$(el).data('num')}`));

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div id="app">

  <div data-num="1">One</div>

  <div data-num="2">Two</div>

  <div data-num="3">Three</div>

  <div data-num="4">Four</div>

</div>


<button>Test</button>


查看完整回答
反對 回復 2023-11-12
?
慕神8447489

TA貢獻1780條經驗 獲得超1個贊

我們還可以通過使用項目索引來實現這一點


jQuery("#app").sortable({

   update: function(e, ui) {

       jQuery("#app div").each(function(i, elm) {

           $elm = jQuery(elm);

           var elindex = $elm.index("#app div");

           $elm.attr("data-num", elindex+1);

       });

    }   

});


查看完整回答
反對 回復 2023-11-12
  • 2 回答
  • 0 關注
  • 157 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號