本文介绍了js/jQuery Drag'n'Drop,重新计算放置目标的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我遇到以下问题,我有一棵大树,它的子节点可以按需折叠和展开(节点内的数据通过AJAX获取).但是,我使用jquery.event.drop/drag来创建我的拖放目标.

I have the following issue, I have a large tree which has subnodes which can be folded and unfolded on demand (the data within nodes gets fetched with AJAX). However, I use jquery.event.drop/drag to create my drag/drop targets.

但是,当我折叠/展开放下目标时,位置会改变,我需要重新计算.这就是我想要的方式:

However, when I fold/unfold the drop targets change position and I need to recalculate. This is how I wanted to do that:

function create_drop_targets() {
  $('li a')
    .bind('dropstart', function(event) {
    })
    .bind('drop', function(event) {
    })
    .bind('dropend', function(event) {
    });
}

create_drop_targets()在折叠/展开时被调用.

create_drop_targets() is called upon fold/unfold.

但是,这不起作用.我在jquery.event.drop中找到了以下内容:

However, this doesn't work. I have located the following within jquery.event.drop:

var drop = $.event.special.drop = {
    setup: function(){
        drop.$elements = drop.$elements.add( this );
        drop.data[ drop.data.length ] = drop.locate( this );
        },
    locate: function( elem ){ // return { L:left, R:right, T:top, B:bottom, H:height, W:width }
        var $el = $(elem), pos = $el.offset(), h = $el.outerHeight(), w = $el.outerWidth();
        return { elem: elem, L: pos.left, R: pos.left+w, T: pos.top, B: pos.top+h, W: w, H: h };
        }

现在,我需要知道如何再次调用setup()方法,以便它用可放置对象的新位置重新填充$ elements.

Now I need to know how I can call the setup() method again so it repopulates $elements with the new positions for the droppables.

推荐答案

只是遇到了同样的问题.我在jQuery的源代码中四处游荡,发现了这一点(在ui.droppable.js中):

Just had the same issue. I wandered around within the source-code of jQuery and found this (in ui.droppable.js):

drag: function(draggable, event) {
  //If you have a highly dynamic page, you might try this option. It renders positions every time you move the mouse.
  if(draggable.options.refreshPositions) $.ui.ddmanager.prepareOffsets(draggable, event);
  ...

因此,您只需要使用

$(".cocktails").draggable({
  refreshPositions: true,
});

似乎没有太多文献记载...但是它解决了我的问题.当然会使一切变慢,我建议您进行一些与用法有关的调整(在更改发生之前将其启用,并在用户移动鼠标并进行更改后将其禁用).

Seems not to be documented very much... but it fixed my problem. Makes everything a bit slower of course, I would advise some usage-dependent tweaking (enable it before the changes occur, and disable it once the user has moved his mouse and the changes have occured).

这篇关于js/jQuery Drag'n'Drop,重新计算放置目标的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-17 14:59
查看更多