Oracle JET w/ Custom Draggable

Oracle JET w/ custom bindings to initialize draggable & droppable interfaces

by Jim Marion

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.min.js"></script>
<div id="panelPage">
  <div class="oj-flex drag-items draggables oj-margin oj-padding"
       data-bind="jmDroppable, foreach: {data: labels, as: 'label'}">
    <div class="oj-panel oj-margin" data-bind="jmDraggable, css: label">
        <span data-bind="text: label"></span>
    </div>
    
  </div>
  
  <div class="drop-target oj-margin oj-padding"
       data-bind="jmDroppable">
    <span>Drop items here</span>
  </div>
  
</div>

CSS

@import url('//cdn.rawgit.com/oracle/oraclejet/2.0.2/dist/css/alta/oj-alta.css');

.draggables .oj-panel,
.drop-target .oj-panel {
  cursor: pointer;
}


.draggables,
.drop-target {
  background-color: #fefefe;
  border: 1px dashed #c0c0c0;
}

JavaScript

requirejs.config({
  // Path mappings for the logical module names
  paths: {
    'knockout': '//cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min',
    'jquery': '//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min',
    "jqueryui": "//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui",
    "jqueryui-amd": "//cdn.rawgit.com/jquery/jquery-ui/1-11-stable/ui",

    "promise": "//cdn.rawgit.com/components/es6-promise/v1.0.0/promise.min",
    "hammerjs": "//cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.4/hammer.min",
    // oj 2.0.2: 9e2dfcb24d7511ed5e524fb38e573ad9bbafbd0d
    "ojdnd": "//cdn.rawgit.com/oracle/oraclejet/2.0.2/dist/js/libs/dnd-polyfill/dnd-polyfill-1.0.0.min",
    "ojs": "//cdn.rawgit.com/oracle/oraclejet/2.0.2/dist/js/libs/oj/min",
    "ojL10n": "//cdn.rawgit.com/oracle/oraclejet/2.0.2/dist/js/libs/oj/ojL10n",
    "ojtranslations": "//cdn.rawgit.com/oracle/oraclejet/2.0.2/dist/js/libs/oj/resources",
    "text": "//cdnjs.cloudflare.com/ajax/libs/require-text/2.0.12/text.min",
    "signals": "//cdnjs.cloudflare.com/ajax/libs/js-signals/1.0.0/js-signals.min"

  },
  // Shim configurations for modules that do not expose AMD
  shim: {
    'jqueryui-amd': {
      exports: "$",
      deps: ['jquery']
    },
    'jquery': {
      exports: ['jQuery', '$']
    }
  },
  config: {
    ojL10n: {
      merge: {
        //'ojtranslations/nls/ojtranslations': 'resources/nls/menu'
        // The following addes en-US to the r.js bundle
        //'ojtranslations/nls/ojtranslations': '../../oj/resources/nls/en-US/localeElements'
      }
    }
  }
});



require(['knockout',
  'jquery',
  'jqueryui-amd/draggable',
  'jqueryui-amd/droppable'
], function(ko, $) {
  'use strict';

  ko.bindingHandlers.jmDraggable = {
    init: function(element) {
      $(element)
        .draggable({
          revert: 'invalid',
          helper: "clone"
        });
    }
  };

  ko.bindingHandlers.jmDroppable = {
    init: function(element) {
      $(element)
       ...