IB Sheet 8 Examples

Drag & Drop

HTML

<link rel="stylesheet" href="https://demo.ibsheet.com/ibsheet/v8/samples/customer-sample/assets/css/style.css">
<link rel="stylesheet" href="https://demo.ibsheet.com/ibsheet/v8/samples/customer-sample/assets/css/ibsheetExampleExtra.css">
<!-- ibsheet css -->
<link rel="stylesheet" href="https://demo.ibsheet.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/css/default/main.css"/>
<!--  ibsheet 필수 js -->
<script src="https://demo.ibsheet.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/ibleaders.js"></script>
<script src="https://demo.ibsheet.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/ibsheet.js"></script>
<script src="https://demo.ibsheet.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/locale/ko.js"></script>

<!--  ibsheet 선택/추가 js -->
<script src="https://demo.ibsheet.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/plugins/ibsheet-common.js"></script>
<script src="https://demo.ibsheet.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/plugins/ibsheet-dialog.js"></script>
<script src="https://demo.ibsheet.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/plugins/ibsheet-excel.js"></script>

<!--  외부 라이브러리 추가 -->
<script src="https://demo.ibsheet.com/ibsheet/v8/samples/customer-sample/assets/vendors/fontawesome.min.js"></script>

<link rel="stylesheet" href="https://www.ibsheet.com/v8/ibsheet/html/../assets/css/ibsheetExampleExtra.css"/>

<div class='ibsheet-wrap' id='descFunc'>
드래그할 때 행이 아닌 이미지가 옮겨집니다.</div>


<div style='height:calc(100% - 219px)'><div style='height:100%;'><div id='LeftSheetDiv' style='float:left;width:49%;height:100%'  ondrop="drop(event)" ondragover="allowDrop(event)"></div><div style='float:left;width:2%;height:100%'></div><div id='RightSheetDiv' style='float:left;width:49%;height:100%'  ondrop="drop(event)" ondragover="allowDrop(event)"></div></div></div>

CSS

a{text-decoration:none;color:#4444FF;}

JavaScript

var ib = ib||{};
ib = {
//시트 초기화 구문
'init':{
  "LeftSheetInit": {
    //공통기능 설정 부분
  "Cfg": {
      "CanDrag": 1
    },
    //틀고정 좌측 컬럼 설정
  "LeftCols": [
      {"Header": "선택","Type": "Bool","Name": "chk","MinWidth": 35,"Align": "Center","CanMove": 0,"CanEdit": 1}
    ],
    //중앙(메인) 컬럼 설정
  "Cols": [
      {"Header": "직급","Type": "Text","Name": "sPos","MinWidth": 60,"Align": "Center","CanEdit": 0},
      {"Header": "성명","Type": "Text","Name": "sName","MinWidth": 50,"Align": "Center","CanEdit": 0,"RelWidth": 1},
      {"Header": "성별","Type": "Enum","Name": "sSex","MinWidth": 40,"Align": "Center","Enum": "|男|女","EnumKeys": "|남|여"},
      {"Header": "연령대","Type": "Text","Name": "sAge2","MinWidth": 50,"Align": "Center"},
      {"Header": "거주지1","Type": "Text","Name": "sAddr1","MinWidth": 50,"Align": "Center","CanEdit": 0,"RelWidth": 1},
      {"Header": "나이","Type": "Int","Name": "sAge","MinWidth": 50,"Align": "Right","CanEdit": 0}
    ]
  },
  "RightSheetInit": {
    "Cfg": {
      "SearchMode": 2,
      "MainCol": "sName",
      "CanDrag": 1
    },
    "LeftCols": [
      {"Header": " ","Type": "Int","Width": 50,"Align": "Center","Name": "SEQ","CanFocus": 0,"CanMove": 0}
    ],
    "Cols": [
      {"Header": "부서/성명","Type": "Text","Name": "sName","Width": 150,"Align": "Left"},
      {"Header": "직급","Type": "Text","Name": "sPos","MinWidth": 60,"Align": "Center","CanEdit": 0},
      {"Header": "성별","Type": "Enum","Name": "sSex","MinWidth": 40,"Align": "Center","Enum": "|男|女","EnumKeys": "|남|여"},
      {"Header": "연령대","Type": "Text","Name": "sAge2","MinWidth": 50,"Align": "Center"},
      {"Header": "거주지1","Type": "Text","Name": "sAddr1","MinWidth": 50,"Align": "Center","CanEdit": 0,"RelWidth": 1},
      {"Header": "나이","Type": "Int","Name": "sAge","MinWidth": 50,"Align": "Right","CanEdit": 0,"Format": "#,###"}
    ]
  }
},
//시트 이벤트
'event':{
    onStartDrag:function (evtParam) {
      var sheet = evtParam.sheet;
      if (sheet.id === 'LeftSheet' &&...