【JQuery UI】放置插件——droppable

最新推荐文章于 2023-04-07 17:22:39 发布

badlyForPapers

最新推荐文章于 2023-04-07 17:22:39 发布

阅读量649

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/happyhaojie/article/details/51084397

版权

jQuery 专栏收录该内容

73 篇文章 0 订阅

订阅专栏

很好理解。

除使用draggable插件拖曳任意元素外，还可以调用droppable UI插件将拖曳后的任意元素放置在指定区域中，类似购物车效果，调用格式如下：

$(selector).droppable({options})

selector参数为接收拖曳元素，options为方法的配置对象，在对象中，drop函数表示当被接收的拖曳元素完全进入接收元素的容器时，触发该函数的调用。

例子：构建定义的drop函数代码，改变“回收站”元素的背景色和显示的内容。

<body>
        <div id="divtest">
            <div class="box">
                <div class="title">产品区</div>
                <div class="drag"><div>苹果</div></div>
                <div class="drag"><div>香蕉</div></div>
            </div>
            <div class="box">
                <div class="title">回收站(<span>0</span>)</div>
                <div class="cart"><div id="tip">还没有产品</div></div>
            </div>
        </div>
        
        <script type="text/javascript">
            var sum=0; 
            $(function () {
                $(".drag").draggable();
                $(".cart").droppable({
                    drop: function () { 
                        sum++;
                        $(this).addClass("focus").find("#tip").html("");  
                        $('span').text(sum);
                            
                    }
                })
            });
        </script>
    </body>

补充find()函数

find() 方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>

<body>
  <p><span>Hello</span>, how are you?</p>
  <p>Me? I'm <span>good</span>.</p>

<script>
  $("p").find("span").css('color','red');
</script>

</body>
</html>