您好,欢迎来到无锡中智培训学校电脑培训专业网!咨询电话:0510-82828991
分享到:
无锡中智职业培训学校七大校区就近上课:南禅寺校区、胜利门校区、河埒口校区、新区校区、恒隆校区、宜兴校区、江南校区

网页设计html元素拖拽功能

时间:2014-12-16 13:26 作者:中智培训 点击:
  无锡中智培训老师分享:win8系统定位功能的使用方法
  1.创建拖拽对象
  我们可以通过draggable属性告诉浏览器,哪些元素需要实现拖拽功能。draggable有三个值:true:元素可以被拖拽;false:元素不能被拖拽;auto:浏览器自己判断元素是否能被拖拽。
  系统默认值是auto,但auto情况下浏览器对不同元素拖拽功能的支持是不一样,如:支持img对象,不支持div对象。所以,如果需要拖拽一个元素,最好还是把draggale设置为true。下面我们看一个例子:
  代码如下:
  <!DOCTYPE HTML>
  <html>
  <head>
  <title>Example</title>
  <style>
  #src > *
  {
  float: left;
  }
  #target, #src > img
  {
  border: thin solid black;
  padding: 2px;
  margin: 4px;
  }
  #target
  {
  height: 123px;
  width: 220px;
  text-align: center;
  display: table;
  }
  #target > p
  {
  display: table-cell;
  vertical-align: middle;
  }
  #target > img
  {
  margin: 1px;
  }
  </style>
  </head>
  <body>
  <div id="src">
  <img draggable="true" id="car1" src="img/1.jpg" alt="car1" />
  <img draggable="true" id="car2" src="img/2.jpg" alt="car2" />
  <img draggable="true" id="car3" src="img/3.jpg" alt="car3" />
  <div id="target">
  <p id="msg">
  drop here</p>
  </div>
  </div>
  <script>
  var src = document.getElementById("src");
  var target = document.getElementById("target");
  </script>
  </body>
  </html>
  2.处理拖拽事件
  现在我们来了解拖拽相关的事件,有两种类型的事件,一种是拖拽对象的事件,一种是投放区的事件。拖拽事件包括:dragstart:当元素拖拽开始触发;drag:在元素拖拽过程中触发;dragend:元素拖拽结束时触发。下面我们就看一个例子:
  代码如下:
  <!DOCTYPE HTML>
  <html>
  <head>
  <title>Example</title>
  <style>
  #src > *
  {
  float: left;
  }
  #target, #src > img
  {
  border: thin solid black;
  padding: 2px;
  margin: 4px;
  }
  #target
  {
  height: 123px;
  width: 220px;
  text-align: center;
  display: table;
  }
  #target > p
  {
  display: table-cell;
  vertical-align: middle;
  }
  #target > img
  {
  margin: 1px;
  }
  img.dragged
  {
  background-color: Orange;
  }
  </style>
  </head>
  <body>
  <div id="src">
  <img draggable="true" id="car1" src="img/1.jpg" alt="car1" />
  <img draggable="true" id="car2" src="img/2.jpg" alt="car2" />
  <img draggable="true" id="car3" src="img/3.jpg" alt="car3" />
  <div id="target">
  <p id="msg">
  drop here</p>
  </div>
  </div>
  <script>
  var src = document.getElementById("src");
  var target = document.getElementById("target");
  var msg = document.getElementById("msg");
  src.ondragstart = function (e) {
  e.target.classList.add("dragged");
  }
  src.ondragend = function (e) {
  e.target.classList.remove("dragged");
  msg.innerHTML = "drop here";
  }
  src.ondrag = function (e) {
  msg.innerHTML = e.target.id;
  }
  </script>
  </body>
  </html>
  3.创建投放区
  我们来看投放区相关的事件:dragenter:当拖拽对象进入投放区时触发;dragover:拖拽对象在投放区内移动时触发;dragleave:拖拽对象没有投放到投放区,离开投放区的时候触发;drop:拖拽对象投放在投放区时触发。
  我们来看一个例子:
  代码如下:
  <!DOCTYPE HTML>
  <html>
  <head>
  <title>Example</title>
  <style>
  #src > *
  {
  float: left;
  }
  #target, #src > img
  {
  border: thin solid black;
  padding: 2px;
  margin: 4px;
  }
  #target
  {
  height: 123px;
  width: 220px;
  text-align: center;
  display: table;
  }
  #target > p
  {
  display: table-cell;
  vertical-align: middle;
  }
  #target > img
  {
  margin: 1px;
  }
  img.dragged
  {
  background-color: lightgrey;
  }
  </style>
  </head>
  <body>
  <div id="src">
  <img draggable="true" id="car1" src="img/1.jpg" alt="car1" />
  <img draggable="true" id="car2" src="img/2.jpg" alt="car2" />
  <img draggable="true" id="car3" src="img/3.jpg" alt="car3" />
  <div id="target">
  <p id="msg">
  drop here</p>
  </div>
  </div>
  <script>
  var src = document.getElementById("src");
  var target = document.getElementById("target");
  var msg = document.getElementById("msg");
  var draggedID;
  target.ondragenter = handleDrag;
  target.ondragover = handleDrag;
  function handleDrag(e) {
  e.preventDefault();
  }
  target.ondrop = function (e) {
  var newElem = document.getElementById(draggedID).cloneNode(false);
  target.innerHTML = "";
  target.appendChild(newElem);
  e.preventDefault();
  }
  src.ondragstart = function (e) {
  draggedID = e.target.id;
  e.target.classList.add("dragged");
  }
  src.ondragend = function (e) {
  var elems = document.querySelectorAll(".dragged");
  for (var i = 0; i < elems.length; i++) {
  elems[i].classList.remove("dragged");
  }
  }
  </script>
  </body>
  </html>
  推荐:网页设计XHTML表格标签的应用
       网页设计CSS网页布局中外边距叠加

无锡中智教育 无锡电脑培训班 无锡网页设计培训 无锡平面设计培训
无锡市中智职业培训学校 无锡中智培训 专注电脑培训|网站地图
热线电话:400-8818-707 版权所有 无锡中智培训学校 WWW.WX68.COM Copyright ©2013 ALL Rights Reserved
备案号:渝ICP备09051384号-1
网站地图