Easyui Komponen Droppable melaksanakan kesan penempatan-tutorial js-php.cn

Easyui Komponen Droppable melaksanakan kesan penempatan

PHPz

Lepaskan： 2018-09-29 11:05:08

ke hadapan

1190 orang telah melayarinya

Droppable dan draggable adalah serupa, tetapi perbezaannya ialah yang pertama memfokuskan pada meletakkan elemen ke dalam bekas, manakala yang terakhir memfokuskan kepada draggable (walaupun beberapa kesan mungkin dicapai oleh kedua-duanya). Dan dengan melihat kod sumber easyloader, kita boleh tahu bahawa droppable tidak bergantung pada draggable.

Penempatan yang dipanggil adalah untuk meletakkan objek ke dalam objek Sudah tentu, adalah penting untuk easyui mencetuskan pelbagai kesan Pada masa yang sama, komponen ini tidak akan bergantung pada komponen lain.

Kaedah pemuatan boleh jatuh

1, pemuatan kelas Saya tidak pernah menyukai kaedah pemuatan kelas Ia membazir kedudukan dan kelihatan tidak kemas apabila terdapat terlalu banyak kod.

Kod adalah seperti berikut:

<p id=&#39;dd&#39; class="easyui-droppable" data-options="accept:&#39;#box,#pox&#39;"></p>

Salin selepas log masuk

2,js memuatkan panggilan

$("#box").droppable({
  accept:&#39;#pox&#39;,     //将元素pox 放置在元素box中
});

Salin selepas log masuk

Atribut boleh jatuh

1 ,terima

Lalai adalah batal, tentukan elemen mana yang diterima, iaitu elemen mana yang boleh diletakkan

$("#box").droppable({
  accept:&#39;#pox&#39;,     //将元素pox 放置在元素box中
});

Salin selepas log masuk

2, dinyahdayakan　

Lalai adalah palsu Jika benar, adalah dilarang Drop

$("#box").droppable({
  accept:&#39;#pox&#39;,     //将元素pox 放置在元素box中
  disabled : true ,    //禁止放置
});

Salin selepas log masuk

Senarai acara boleh jatuh

　1,onDragEnter dicetuskan apabila elemen diseret ke kawasan drop

　2, onDragOver Dicetuskan apabila elemen yang diseret melalui kawasan peletakan

3. onDragLeave Dicetuskan apabila elemen yang diseret meninggalkan kawasan peletakan

4. onDrop Dicetuskan apabila elemen yang diseret diletakkan ke dalam kawasan peletakan Apabila dicetuskan

onDragEnter /onDragOver/onDragLeave/onDrop: function (e,source){
   //source 参数获取DOM元素
 }

Salin selepas log masuk

Senarai kaedah boleh jatuh

1, pilihan mengembalikan objek atribut

console.log($(&#39;#box&#39;).droppable(&#39;options&#39;));

Salin selepas log masuk

2, dayakan, lumpuhkan dan atribut di atas Fungsinya adalah sama, iaitu untuk membolehkan dan melumpuhkan peletakan

$(&#39;#box&#39;).droppable(&#39;enable/disable&#39;)

Salin selepas log masuk

Biar saya tunjukkan contoh rasmi kepada anda

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Accept a Drop - jQuery EasyUI Demo</title>
 <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/metro/easyui.css">
 <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/icon.css">
 <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/demo/demo.css">
 <script type="text/javascript" src="jquery-easyui-1.3.6/jquery.min.js"></script>
 <script type="text/javascript" src="jquery-easyui-1.3.6/jquery.easyui.min.js"></script>
</head>
<body>
 <div style="margin:20px 0;"></div>
 <div id="source" style="border:1px solid #ccc;width:300px;height:400px;float:left;margin:5px;">
  drag me!
  <div id="d1" class="drag">Drag 1</div>
  <div id="d2" class="drag">Drag 2</div>
  <div id="d3" class="drag">Drag 3</div>
 </div> 
 <div id="target" style="border:1px solid #ccc;width:300px;height:400px;float:left;margin:5px;">
  drop here!
 </div>
 <div style="clear:both"></div>
 <style type="text/css">
  .drag{
   width:100px;
   height:50px;
   padding:10px;
   margin:5px;
   border:1px solid #ccc;
   background:#AACCFF;
  }
  .dp{
   opacity:0.5;
   filter:alpha(opacity=50);
  }
  .over{
   background:#FBEC88;
  }
 </style>
 <script>
  /**
  使用js方式将元素设置为可draggable的
  */
  $(function(){
   $(&#39;.drag&#39;).draggable({
    proxy:&#39;clone&#39;,
    revert:true,
    cursor:&#39;pointer&#39;,
    onStartDrag:function(){
     $(this).draggable(&#39;options&#39;).cursor=&#39;not-allowed&#39;;//设置鼠标样式为不可拖动
     $(this).draggable(&#39;proxy&#39;).addClass(&#39;dp&#39;);//设置样式
    },
    onStopDrag:function(){
     $(this).draggable(&#39;options&#39;).cursor=&#39;auto&#39;;//设置鼠标
    }
   });
   //将容易置为droppable并且可接受元素
   $(&#39;#target&#39;).droppable({
    accept:&#39;#d1,#d3&#39;,
    onDragEnter:function(e,source){//拖入
     $(source).draggable(&#39;options&#39;).cursor=&#39;auto&#39;;
     $(source).draggable(&#39;proxy&#39;).css(&#39;border&#39;,&#39;1px solid red&#39;);
     $(this).addClass(&#39;over&#39;);
    },
    onDragLeave:function(e,source){//脱离
     $(source).draggable(&#39;options&#39;).cursor=&#39;not-allowed&#39;;
     $(source).draggable(&#39;proxy&#39;).css(&#39;border&#39;,&#39;1px solid #ccc&#39;);
     $(this).removeClass(&#39;over&#39;);
    },
    onDrop:function(e,source){//放下
     $(this).append(source)
     $(this).removeClass(&#39;over&#39;);
     alert("我被放下了");
    } ,
    //onDropOver当元素被拖出(成功放入到某个容器)的时候触发
    onDragOver:function(e,source){
      alert("我被拖出去了");//先于alert("我被放下了");执行,表明其触发在onDrop之前。
   }
   });
  });
 </script>
  
</body>
</html>

Salin selepas log masuk

Rendering operasi tidak diberikan di sini, laman web rasmi boleh digunakan terus Semak. OVER!

Alamat kesan: http://www.jeasyui.com/demo/main/index.php?plugin=Droppable&theme=default&dir=ltr&pitem=

Di atas Itu sahaja kandungan bab ini. Untuk lebih banyak tutorial berkaitan, sila lawati Tutorial Video jQuery, Tutorial Video jQuery EasyUI!