easyui Komponen boleh seret melaksanakan effect_jquery seret

Sebagai pemalam UI yang merangkumkan JQuesey, easyui sebenarnya agak mudah digunakan, sekurang-kurangnya ia menjimatkan banyak masa seperti saya.

Boleh diseret boleh dimuatkan dalam dua cara:

1, dimuatkan melalui kelas, seperti berikut:

<div id="box" class="easyui-draggable"></div>

Memuatkan melalui JS, seperti berikut:

$('#box').draggable();

Perlu diambil perhatian bahawa kedua-dua titik di atas ialah kedua-dua 'easyui-draggable' dan draggable adalah tetap, semuanya mencapai kesan jQuery dengan memanggil fungsi yang telah ditulis oleh easyui.

Sifat boleh seret:

kembali Apabila nilai adalah benar, ia akan kembali ke kedudukan permulaan apabila menyeret berhenti, dan anda boleh menyeret ke mana-mana.

kembali : boolean,

paksi Hadkan arah penyeretan, mendatar 'h'? menegak 'v'? Ini lebih menarik apabila digabungkan dengan berbalik Tetapkan arah seret kepada

Jika ia menegak, ia sama dengan mesej yang menyegarkan semula di WeChat dan Weibo.

paksi : Rentetan/'v'/'h',

Pengklonan Proksi bermakna objek yang akan diseret kekal tidak berubah apabila menyeret, dan kemudian menyalin objek yang akan diseret pada tetikus, sudah tentu

Ia boleh menjadi sesuatu yang lain, ia boleh mencetuskan fungsi.

proksi : null/String/fungsi,
Kemudian terdapat banyak atribut lain, yang saya rasa tidak begitu menarik.

kursor: gerakkan/String, //Tentukan gaya CSS penuding apabila menyeret untuk menjadi cantik
deltaX : nol/nombor,
deltaY: null/number, //Elemen yang diseret sepadan dengan x, y kedudukan kursor semasa, iaitu jarak
antara elemen yang diseret dan kursor. pemegang: null/selector // Pemegang untuk mula menyeret Handle! Anda hanya boleh menyeret dengan pemegang! Ya!
disabled : boolean //Jika ditetapkan kepada benar, elemen terikat pada masa ini tidak boleh diseret
tepi: nombor                            //Lebar bekas yang boleh diseret di dalamnya Dikira dari bahagian atas, bawah, kiri dan kanan bekas, ia adalah seperti segi empat tepat di dalam segi empat tepat, dan kemudian elemen di dalamnya hanya boleh diseret apabila tetikus diletakkan pada segi empat tepat dalam

Contoh:

$('#box').draggable({
  revert : true,
  cursor: 'text',
  handle : '#pox',
  disabled : false,
  edge : 50,
  axis :'v',
  proxy : 'clone',
  deltaX: 10,
  deltaY : 10,
  proxy: function(source){
    console.log('呵呵哒！');
  }
});

Acara boleh seret:

onBeforeDrag dicetuskan sebelum menyeret, mengembalikan palsu akan membatalkan seretan

onBeforeDrag : function (e){
  alert('拖动之前触发');
  return false;
}

onStartDrag dicetuskan apabila menyeret

onStartDrag : function(e){
  alert('拖动时触发');
}

onDrag dicetuskan semasa proses menyeret dan mengembalikan palsu jika penyeretan tidak dapat dilakukan

onDrag : function(e){
  alert('拖动过程触发');
}

onDrag dicetuskan apabila penyeretan dihentikan

onStopDrag : function (e){
  alert('在拖动停止时触发');
}

Senarai kaedah boleh seret

Pilihan mengembalikan objek atribut

console.log($('#box').draggable('options'));

proksi Jika atribut proksi ditetapkan, kembalikan elemen proksi seret

console.log($('#box').draggable('proxy'));

dayakan boleh diseret

$('#box').draggable('enable');

Lumpuhkan larangan diseret

$('#box').draggable('disable');

Mari kita lihat contoh mudah

<pre class="brush:java;">html>
 
 
 
  <meta charset="UTF-8">
  <title>Basic Draggable - 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>
 
 
 
  <h2>Basic Draggable</h2>
  <p>Move the boxes below by clicking on it with mouse.</p>
  <div id="dd" class="easyui-draggable" data-options="handle:'#title'" style="width:100px;height:100px;">
    <div id="title" style="background:#ccc;width:100px;height:100px;">容器里面的内容</div>
  </div>
  <script>
    $(function () {
 
      $("#title").draggable({
        proxy: function (a) {
          var a = $('<div class="proxy_div">你拖我干啥</div>');
          a.appendTo('body');
          return a;
        },
        cursor: 'pointer',
        edge: '6'
      });
    });
  </script>
 
 

Di atas adalah hampir semua sifat, acara, kaedah dan contoh Easyui 1.2.5 Draggable Jika ada yang salah, sila komen, bincang dan ajar kami bersama.