如何使用多個元素的函數？

Question

我創建了一個可拖動的盒子。 您可以在下面看到我的代碼：

 // To change the position of pop-up function handle_mousedown(e){ window.my_dragging = {}; my_dragging.pageX0 = e.pageX; my_dragging.pageY0 = e.pageY; my_dragging.elem = $(".fast_login_form"); my_dragging.offset0 = $(this).offset(); function handle_dragging(e){ var left = my_dragging.offset0.left + (e.pageX - my_dragging.pageX0); var top = my_dragging.offset0.top + (e.pageY - my_dragging.pageY0); $(my_dragging.elem) .offset({top: top, left: left}); } function handle_mouseup(e){ $('body') .off('mousemove', handle_dragging) .off('mouseup', handle_mouseup); } $('body') .on('mouseup', handle_mouseup) .on('mousemove', handle_dragging); } // make draggable 'fast login form' $(".fast_login_form_header").mousedown(handle_mousedown); 

 .fast_login_form{ border: 2px solid gray; width: 250px; height: 100px; } .fast_login_form_header{ text-align: center; border-bottom: 1px solid gray; cursor: move; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="fast_login_form"> <div class="fast_login_form_header"> click and hold and move </div> </div> 

上面的代碼也適用，但它只是根據這一行的一個框：

my_dragging.elem  =  $(".fast_login_form");

現在我想知道，我怎樣才能為每個盒子實現這個功能？ 不只是.fast_login_form ？ 其實我想知道如何將$(".fast_login_form")作為參數傳遞給該函數？

---

換句話說，我想在HTML中創建另一個這樣的框：

<div class="another_fast_login_form">
    <div class="fast_login_form_header"> click and hold and move </div>
</div>

而且我也希望它可以拖延。 我可以為這兩個代碼編寫兩次這些代碼，但我想知道如何將這些代碼用於多個框？

Answer 1

使用$(this).closest('.fast_login_form')而不是$('.fast_login_form')

 // To change the position of pop-up function handle_mousedown(e){ window.my_dragging = {}; my_dragging.pageX0 = e.pageX; my_dragging.pageY0 = e.pageY; my_dragging.elem = $(this).closest('.fast_login_form'); my_dragging.offset0 = $(this).offset(); function handle_dragging(e){ var left = my_dragging.offset0.left + (e.pageX - my_dragging.pageX0); var top = my_dragging.offset0.top + (e.pageY - my_dragging.pageY0); $(my_dragging.elem) .offset({top: top, left: left}); } function handle_mouseup(e){ $('body') .off('mousemove', handle_dragging) .off('mouseup', handle_mouseup); } $('body') .on('mouseup', handle_mouseup) .on('mousemove', handle_dragging); } // make draggable 'fast login form' $(".fast_login_form_header").mousedown(handle_mousedown); 

 .fast_login_form{ border: 2px solid gray; width: 250px; height: 100px; } .fast_login_form_header{ text-align: center; border-bottom: 1px solid gray; cursor: move; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="fast_login_form"> <div class="fast_login_form_header"> click and hold and move </div> </div> <div class="fast_login_form"> <div class="fast_login_form_header"> click and hold and move </div> </div> 

Answer 2

只需使用一個選擇所有可拖動元素的選擇器，例如給它們一個draggable的類，並用$(".draggable")選擇它們。 而不是使用全局變量（ window.my_dragging ），使用局部變量var my_dragging ，因此它對每個元素都是唯一的。

Answer 3

為什么不只是讓一個新的類“draggable”，將其添加到任何你想要draggable的元素也切換你的選擇器使用

my_dragging.elem  =  $(".draggable");