Day: 2022年9月27日

使用 HTML5 拖放 拖拽 drag drop API

admin web前端 暂无评论 509 浏览

HTML5 拖放 (DnD) API 意味着页面上的几乎任何元素都可以变为可拖动。在本文中，我们将介绍拖放的基础知识。

创建可拖动的内容 #

值得注意的是，在大多数浏览器中，文本选择、图像和链接是默认可拖动的。例如，如果拖动谷歌搜索上的谷歌标志，您将看到重影图像。随后可以将该图像拖放到地址栏、 <input type="file" /> 元素，甚至桌面上。要使其他类型的内容可拖动，您需要使用 HTML5 DnD API。

要使对象可拖动，请对该元素设置 draggable=true。几乎任何元素都可以支持拖动，包括图像、文件、链接、文件或页面上的任何标记。

在我们的示例中，我们将创建一个界面来重新排列一些列，它们已通过 CSS Grid 进行布局。这些列的基本标记如下所示，每个列的 draggable 属性均设置为 true 。…

    
Read more

js 调用 angularJs 的方法

admin web前端 暂无评论 284 浏览

方法一：通过controller来获取

var appElement = document.querySelector('[ng-controller=mainController]');

// 获取$scope变量：
var $scope = angular.element(appElement).scope(); 

// 如果先调用 Controller 里面的方法的话

$scope.somefunc('xxx');

// 改变了值之后还需要调用一下下面的方法, 才可以刷新最新改变的内容

$scope.$apply()

方法二：通过DOM操作获取

//通过DOM操作获取app对象
var element = angular.element($document.getElementById("app")); // app 是ng-app所在的DOM元素的id的值
//得到app对象，可以获取app的controller
var controller = element.controller();
//得到app对象，可以获取app的$scope
var scope = element.scope();
//调用$scope中的方法
…
Read more