Rumah >hujung hadapan web >tutorial js >Easyui Komponen Droppable melaksanakan kesan penempatan

Easyui Komponen Droppable melaksanakan kesan penempatan

PHPzke hadapan: 2016-05-16 15:44:281236semak imbas

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>

2,js memuatkan panggilan

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

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中
});

2, dinyahdayakan　

Lalai adalah palsu Jika benar, adalah dilarang Drop

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

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元素
 }

Senarai kaedah boleh jatuh

1, pilihan mengembalikan objek atribut

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

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

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

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>

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!

Kenyataan：

Artikel ini dikembalikan pada:jb51.net. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：JS DIV CSS melaksanakan kemahiran effect_javascript senarai drop-down seperti bentukArtikel seterusnya：JS DIV CSS melaksanakan kemahiran effect_javascript senarai drop-down seperti bentuk

Artikel berkaitan

Lihat lagi