How to implement drag and drop function in AngularJS
This article mainly introduces the simple drag and drop function implemented by AngularJS, involving implementation techniques related to AngularJS event response and dynamic operation of page element attributes. Friends in need can refer to it
The example of this article describes the implementation of AngularJS Simple drag and drop functionality. Share it with everyone for your reference, the details are as follows:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>www.jb51.net AngularJS拖拽</title>
<style>
*{
padding:0;
margin:0;
}
.wei{
width:100px;
height:100px;
background: red;
position:absolute;
cursor: pointer;
/*left:0;top:0;*/
}
</style>
</head>
<body ng-controller="show">
<p class="wei" wei-yi data="true"></p>
<p class="wei" wei-yi data="false"></p>
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="angular.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app = angular.module('myApp',[]);
//自定义属性
app.directive("weiYi",function(){
return{
restrict :'A',//A属性,E标签,C类名,D注释
link :function(scope,element,attr){
attr.data=angular.equals(attr.data,"true");
//console.log(attr.data);
console.log(element);
element.on("mousedown",function(e){
var that = $(this);
console.log(attr.data);
if(attr.data){
$p=$("<p>");
console.log($p);
$p.css({"width":"100px","height":"100px","border": "2px dotted green","position":"absolute","left":that.offset().left,"top":that.offset().top});
$p.appendTo($("body"));
}
var x=e.clientX-$(this).offset().left;
var y=e.clientY-$(this).offset().top;
//console.log(x+":"+y);
$(document).on("mousemove",function(e){
if(attr.data){
$p.css({"left":e.clientX-x,"top":e.clientY-y});
}else{
that.css({"left":e.clientX-x,"top":e.clientY-y});
}
});
$(document).on("mouseup",function(e){
//console.log($p);
$(document).off();
if(attr.data){
that.css({"left":$p.offset().left,"top":$p.offset().top});
$p.remove();
}
})
})
}
}
});
app.controller('show',['$scope',function(scope$){
}]);
</script>
</body>
</html>The operation effect is as follows:
The above is what I compiled for everyone, I hope it will be useful to everyone in the future help.
Related articles:
Detailed interpretation of React Native Flexbox layout
What are the methods for reference paths in vue single files?
Use Koa to build projects through Node.js
The above is the detailed content of How to implement drag and drop function in AngularJS. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to use JavaScript to implement the drag and zoom function of images?
Oct 27, 2023 am 09:39 AM
How to use JavaScript to implement the drag and zoom function of images? In modern web development, dragging and zooming images is a common requirement. By using JavaScript, we can easily add dragging and zooming functions to images to provide a better user experience. In this article, we will introduce how to use JavaScript to implement this function, with specific code examples. HTML structure First, we need a basic HTML structure to display pictures and add
Tips and best practices for drag-and-drop selection and placement in Vue
Jun 25, 2023 am 10:13 AM
Vue is a popular JavaScript framework suitable for building single page applications (SPA). It supports drag-and-drop selection and placement functions through instructions and components, providing users with a better interactive experience. This article will introduce the techniques and best practices for drag-and-drop selection and placement in Vue. Drag Instruction Vue provides a v-draggable instruction that can easily achieve drag effects. This command can be applied to any element, and the drag style can be customized.
How to use Vue to implement drag-and-drop sorting effects
Sep 20, 2023 pm 03:01 PM
How to use Vue to implement drag-and-drop sorting effects Vue.js is a popular JavaScript framework that can help us build highly interactive front-end applications. In Vue, we can easily implement drag-and-drop sorting effects, allowing users to sort data by dragging elements. This article will introduce how to use Vue to implement drag-and-drop sorting effects, and provide specific code examples. First, we need to create an instance of Vue and define an array to store the data to be sorted. In the example we will
How to copy and move drag-and-drop elements in Vue?
Jun 25, 2023 am 08:35 AM
Vue is a popular JavaScript framework that provides a convenient drag-and-drop function, allowing us to easily copy and move elements. Next, let's take a look at how to copy and move drag-and-drop elements in Vue. 1. Basic implementation of drag-and-drop elements To copy and move drag-and-drop elements in Vue, you first need to implement the basic drag-and-drop function of the element. The specific implementation method is as follows: Add the elements that need to be dragged in the template: <divclass="drag-elem"
Vue practical skills: use the v-on instruction to handle mouse drag events
Sep 15, 2023 am 08:24 AM
Vue practical skills: Use the v-on instruction to handle mouse drag events Preface: Vue.js is a popular JavaScript framework. Its simplicity, ease of use and flexibility make it the first choice for many developers. In Vue application development, handling user interaction events is an essential skill. This article will introduce how to use Vue's v-on directive to handle mouse drag events and provide specific code examples. Create a Vue instance: First, introduce the Vue.js library file in the HTML file: &
The latest 5 angularjs tutorials in 2022, from entry to mastery
Jun 15, 2017 pm 05:50 PM
Javascript is a very unique language. It is unique in terms of the organization of the code, the programming paradigm of the code, and the object-oriented theory. The issue of whether Javascript is an object-oriented language that has been debated for a long time has obviously been There is an answer. However, even though Javascript has been dominant for twenty years, if you want to understand popular frameworks such as jQuery, Angularjs, and even React, just watch the "Black Horse Cloud Classroom JavaScript Advanced Framework Design Video Tutorial".
How to use JavaScript to implement the function of dragging and dropping to change the size of elements?
Oct 21, 2023 am 11:34 AM
How to use JavaScript to implement the function of dragging and dropping to change the size of elements? With the development of Web technology, more and more web pages need to have the function of dragging and dropping to change the size of elements. For example, you can drag and resize a div element to adjust its width and height. This article will introduce how to use JavaScript to achieve this function and provide specific code examples. Before we start, we need to understand some basic concepts: the position and size properties of elements: in CSS, through t
How to implement drag and drop sorting function in uniapp
Jul 06, 2023 pm 12:31 PM
How to implement drag-and-drop sorting function in uniapp Drag-and-drop sorting is a common user interaction method that allows users to change the order of elements by dragging them. In uniapp, we can implement the drag and drop sorting function by using the component library and some basic drag events. The following will introduce in detail how to implement the drag and drop sorting function in uniapp, with code examples. Step 1: Create a basic list page First, we need to create a basic list page to display the elements that need to be sorted. can use&
