欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

day12—jQuery ui引入及初体验

程序员文章站 2022-03-13 11:09:53
转行学开发,代码100天——2018-03-28 按照所下载教学视频,今天已进行到jQuery UI的学习中。注:本人所用教学视频不是太完整,介绍的内容相对简单,有些只是带过。其他时间中,仍需继续针对各知识模块进行补充学习。 今天记录一下jQuery UI的引用和使用初体验 在开发之前,到jQuer ......

转行学开发,代码100天——2018-03-28

按照所下载教学视频,今天已进行到jQuery UI的学习中。注:本人所用教学视频不是太完整,介绍的内容相对简单,有些只是带过。其他时间中,仍需继续针对各知识模块进行补充学习。

今天记录一下jQuery UI的引用和使用初体验

在开发之前,到jQuery UI官网下载库文件。https://jqueryui.com/ 

库文件引用:

<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-ui.min.css">
<script type="text/javascript" src ="jquery-ui.min.js"></script>

<!DOCTYPE html>
<html>
<head>
    <title>jQuery UI 01——draggable</title>
    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="jquery-ui.min.css">
    <script type="text/javascript" src ="jquery-ui.min.js"></script>
    <script type="text/javascript" src="draggable.js"></script>
</head>
<body>
 <div id ="div1" style="width: 100px ;height: 100px;border: 1px solid red;">
    DIV1
 </div>
 <div id="div2" style="width: 200px;height: 300px; border:1px solid yellow;">DIV2</div>
</body>
</html>

 本例中,创建两个DIV盒子,一个实现拖动效果,一个实现允许拖入效果

其中,自定义js文件draggable.js文件中

$(document).ready(function()
{
    $("#div1").draggable();
    $("#div2").droppable();
    $("#div2").on("drop",function(event,ui)
        {
            $("#div2").text("drop ok!")
        });
});

DIV1实现被拖动,DIV2允许被拖入,即将div1拖进div2中时,实现DIV2文本的修改。

初始状态:

day12—jQuery ui引入及初体验

拖动完成:

day12—jQuery ui引入及初体验

 

疑问:在拖动中,如果只是div1盒子少量进入div2中时,并不会修改div2中的 文本,当大部分拖进div2中时,才会修改div2中的文本。

这种现象源于这个方法的何种内部逻辑?

day12—jQuery ui引入及初体验

day12—jQuery ui引入及初体验