Py学习  »  Jquery

jquery draggable:仅在一个可下拉列表上可拖动

Jessy • 4 年前 • 525 次点击  

我有一个应用程序,有一些可下拉和可拖动的,我想为一种可拖动的类型(有一个给定的类)做,这个可拖动的只能在一种可拖放的类型上进行。

问题是,这取决于类,在我的网格中,可拖动的对象可以拖动到任何地方:

 $('.grid-drop').droppable({
        accept: '.block',
        hoverClass: 'hovered',
        drop: handlePublishBlock
 });

所以我要做的是,当我开始拖动元素时,我会像这样更改网格的接受:

$('.grid-drop').droppable({
       accept: '.unknown-class',
       hoverClass: 'hovered',
       drop: handlePublishBlock
});

但它似乎不起作用,我仍然可以在网格上拖动我的elem。

我要做的是,这个类的元素只能拖到一滴,之后就不能再拖了,所以我的实际代码是:

 $(".draggable-one")
        .mousedown(function() {
            $('.grid-drop').droppable({
                accept: '.unknown-class',
                hoverClass: 'hovered',
                drop: handlePublishBlock
            });

            console.log("mousedown");
            isDragging = false;
        })
        .mousemove(function() {
            console.log("mousemove");
            isDragging = true;
        })
        .mouseup(function() {
            console.log("mouseup");
            var wasDragging = isDragging;
            isDragging = false;
            if (wasDragging) {

                $('.grid-drop').droppable({
                    accept: '.block',
                    hoverClass: 'hovered',
                    drop: handlePublishBlock
                });


                $(this).draggable('disable');
                $(this).removeClass('block-draggable');
            }
        });

当我开始拖动时,我禁用网格上的放置(但似乎不起作用),当我拖动到网格以外的其他字段(只有一个其他字段)时,该元素不能再次拖动。这可以工作,但禁用和重新启用网格不工作。

有人能帮我吗?谢谢。

Python社区是高质量的Python/Django开发社区
本文地址:http://www.python88.com/topic/38118
 
525 次点击  
文章 [ 1 ]  |  最新文章 4 年前
Twisty
Reply   •   1 楼
Twisty    5 年前

如果没有看到完整的代码,就很难提供帮助。我建议这样做:

$(function(){
  var $grid = $('.grid-drop').droppable({
    accept: '.block',
    hoverClass: 'hovered',
    drop: handlePublishBlock
  });
  var isDragging = false;
  $(".draggable-one").draggable({
    start: function(e, ui){
      $grid.droppable("option", "accept", ".draggable-one");
      console.log(e.type);
      isDragging = true;
    },
    stop: function(e, ui){
      $grid.droppable("option", "accept", ".block");
      console.log(e.type);
      isDragging = false;
    }
  });
});