www.qjdy.com-奇迹赌场 > 佳美特设计 > 元素然后启用他们的拖动和放置

原标题:元素然后启用他们的拖动和放置

浏览次数:158 时间:2019-07-14

本课程向您出示什么使 HTML 成分可拖动,在本例中,大家将创立多少个 DIV 成分然后启用他们的拖动和停放。

图片 1

首先,我们创立四个<div> 成分:

<div id="dd1" class="dd-demo"></div>
<div id="dd2" class="dd-demo"></div>
<div id="dd3" class="dd-demo"></div>

对此第三个>div<成分,我们通过私下认可值让其得以拖动。
$('#dd1').draggable();
对于首个 <div> 成分,大家经过创制三个克隆(clone)了原本成分的代办(proxy)让其能够拖动。

$('#dd2').draggable({
 proxy:'clone'
});

对此第多少个<div> 成分,大家透过创办自定义代理(proxy)让其得以拖动。

$('#dd3').draggable({
 proxy:function(source){
 var p = $('<div class="proxy">proxy</div>');
 p.appendTo('body');
 return p;
 }
});

下边为大家享受学校课程表轻便实例,迎接我们学习:

 大家将创建多少个表格:在左侧突显高校课程,在左侧显示时间表。 您可以拖动高校课程并放置到时间表单元格上。 高校科目是二个 <div class="item"> 成分,时间表单元格是一个 <td class="drop"> 元素。

图片 2

展现学校课程

<div class="left">
 <table>
 <tr>
  <td><div class="item">English</div></td>
 </tr>
 <tr>
  <td><div class="item">Science</div></td>
 </tr>
 <!-- other subjects -->
 </table>
</div>

展示时间表

<div class="right">
 <table>
 <tr>
  <td class="blank"></td>
  <td class="title">Monday</td>
  <td class="title">Tuesday</td>
  <td class="title">Wednesday</td>
  <td class="title">Thursday</td>
  <td class="title">Friday</td>
 </tr>
 <tr>
  <td class="time">08:00</td>
  <td class="drop"></td>
  <td class="drop"></td>
  <td class="drop"></td>
  <td class="drop"></td>
  <td class="drop"></td>
 </tr>
 <!-- other cells -->
 </table>
</div>

拖动在左边的学府课程

$('.left .item').draggable({
 revert:true,
 proxy:'clone'
});

停放高校课程在时刻表单元格上

$('.right td.drop').droppable({
 onDragEnter:function(){
 $(this).addClass('over');
 },
 onDragLeave:function(){
 $(this).removeClass('over');
 },
 onDrop:function(e,source){
 $(this).removeClass('over');
 if ($(source).hasClass('assigned')){
  $(this).append(source);
 } else {
  var c = $(source).clone().addClass('assigned');
  $(this).empty().append(c);
  c.draggable({
  revert:true
  });
 }
 }
});

正如您所见到的地方的代码,当用户拖动在侧面的学院课程并放置到时间表单元格中时,onDrop 回调函数将被调用。大家克隆从左侧拖动的源成分并把它附加到时刻表单元格上。 当把高校课程从时间表的有些单元格拖动到任何单元格,只需简单地运动它就可以。

以上就是为大家来得的怎么使用jQuery EasyUI成立一个这个学校课程表,希望对大家的读书抱有支持,大家会欣赏,况且继续关切我的下一篇小说。

你可能感兴趣的篇章:

  • PHP MySQL jQuery随便拖动层并即时保留拖动地方实例批注
  • PHP jQuery达成自由拖动层并即时保留拖动地方
  • jQuery 拖动层(在可视区域限定内)
  • 应用jQuery的easydrag插件落实可拖动的DIV弹出框
  • jQuery插件slider落成拖动滑块采取价格限制
  • jquery拖动插件(jquery.drag)使用介绍
  • 根据jquery的拖动布局插件
  • jquery拖动层效果插件用法实例深入分析(附demo源码)

本文由www.qjdy.com-奇迹赌场发布于佳美特设计,转载请注明出处:元素然后启用他们的拖动和放置

关键词: bbin官网

上一篇:关注微信号等按钮

下一篇:没有了