JSFiddle - React, Tailwind, and code Playground

by ilyabezp

HTML

<div class="container">
    <a href="https://github.com/marcojakob/dart-dnd/tree/master/example/free-dragging"
    target="_parent">Example Source on GitHub</a>

    <div class="draggable">
      <p>Drag me!</p>
    </div>
  </div>

  <script type="application/dart" src="example.dart"></script>
  <script src="packages/browser/dart.js"></script>

CSS

html, body {
  height: 100%;
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.428571429;
  color: #333;
  background-color: #fff;
  margin: 0;
}

.container {
  max-width: 400px;
  padding: 15px 15px 0 15px;
}

.draggable {
  margin-top: 15px;
  width: 120px;
  height: 120px;
  background: #cddc39;
  border-radius: 8px;
  cursor: url(../../packages/dnd/cursor/openhand.cur), move; /* Cursor for IE. */
  cursor: url(../../packages/dnd/cursor/openhand.cur) 7 5, move; /* Cursor for FF and Chrome (setting midpoint). */
}

.draggable p {
  text-align: center;
  padding-top: 30px;
  margin: 0;
  font-weight: bold;
}

.dnd-dragging {
  opacity: 0.5;
}

.dnd-dragging, .dnd-drag-occurring {
  cursor: url(../../packages/dnd/cursor/closedhand.cur), move; /* Cursor for IE. */
  cursor: url(../../packages/dnd/cursor/closedhand.cur) 7 5, move; /* Cursor for FF and Chrome (setting midpoint). */
}

JavaScript

// Copyright (c) 2013, the Dart project authors.  Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

(function() {
// Bootstrap support for Dart scripts on the page as this script.
if (navigator.userAgent.indexOf('(Dart)') === -1) {
  // TODO:
  // - Support in-browser compilation.
  // - Handle inline Dart scripts.

  // Fall back to compiled JS. Run through all the scripts and
  // replace them if they have a type that indicate that they source
  // in Dart code (type="application/dart").
  var scripts = document.getElementsByTagName("script");
  var length = scripts.length;
  for (var i = 0; i < length; ++i) {
    if (scripts[i].type == "application/dart") {
      // Remap foo.dart to foo.dart.js.
      if (scripts[i].src && scripts[i].src != '') {
        var script = document.createElement('script');
        script.src = scripts[i].src.replace(/\.dart(?=\?|$)/, '.dart.js');
        var parent = scripts[i].parentNode;
        // TODO(vsm): Find a solution for issue 8455 that works with more
        // than one script.
        document.currentScript = script;
        parent.replaceChild(script, scripts[i]);
      }
    }
  }
}
})();