社区所有版块导航
Python
python开源   Django   Python   DjangoApp   pycharm  
DATA
docker   Elasticsearch  
aigc
aigc   chatgpt  
WEB开发
linux   MongoDB   Redis   DATABASE   NGINX   其他Web框架   web工具   zookeeper   tornado   NoSql   Bootstrap   js   peewee   Git   bottle   IE   MQ   Jquery  
机器学习
机器学习算法  
Python88.com
反馈   公告   社区推广  
产品
短视频  
印度
印度  
Py学习  »  Jquery

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

Jessy • 6 年前 • 1370 次点击  

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

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

 $('.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
 
1370 次点击  
文章 [ 1 ]  |  最新文章 6 年前
Twisty
Reply   •   1 楼
Twisty    6 年前

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

$(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;
    }
  });
});