Question

我创建了一个可拖动的盒子。您可以在下面看到我的代码：

＆＃13;

// 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);

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

上面的代码也适用，但根据这一行，它只适用于一个框：

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

使用protected void Application_Start() { AreaRegistration.RegisterAllAreas(); GlobalConfiguration.Configure(WebApiConfig.Register); FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters); RouteConfig.RegisterRoutes(RouteTable.Routes); UnityWebActivator.Start(); }代替$(this).closest('.fast_login_form')

＆＃13;

$('.fast_login_form')

＆＃13;

// 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);

＆＃13;

.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;
}

＆＃13;

Answer 2

只需使用选择所有可拖动元素的选择器，例如为其指定一个类draggable，然后使用$(".draggable")选择它们。而不是使用全局变量（window.my_dragging），而是使用局部变量var my_dragging，因此它对每个元素都是唯一的。

Answer 3

为什么不只是让一个新的类“可拖动”，将其添加到任何你想要拖动的元素也切换你的选择器

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

如何使用多个元素的函数？

3 个答案: