JSFiddle - React, Tailwind, and code Playground

directive to drag / xeditable / textarea

by Andrew Pougher

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://vitalets.github.io/angular-xeditable/dist/css/xeditable.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-xeditable/0.1.12/js/xeditable.js"></script>
<div ng-app="app" ng-controller="Ctrl" class="container">
  <a href="#" editable-textarea="user.name" e-style="color: green" e-required e-placeholder="Enter name">
    {{ (user.name || 'empty') }}
  </a>
<h4 class="editArea"  resizable>{{user.name}}</h4>

</div>

CSS

.container{height:100vh}
div[ng-app] { margin: 50px; }

a {
  border: 1px solid #eeeeee;
text-decoration:none
}


.editArea {
  white-space: pre-wrap;
  /* css-3 */
  white-space: -moz-pre-wrap;
  /* Mozilla, since 1999 */
  white-space: -pre-wrap;
  /* Opera 4-6 */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  word-wrap: break-word;
  word-break: break-all;
  /* webkit */
  white-space: pre\9;
  /* IE7+ */color:black;min-height:45px}
  
  
  .ui-resizable-handle {
  background: #f5dc58;
  border: 1px solid #FFF;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  z-index: 2;
  opacity: 0.3;
  transition: all 0.3s ease 0s;
}

.ui-resizable-handle:hover {
  opacity: 1
}

.ui-resizable-se {
  right: -8px;
  bottom: -8px;
}

.ui-rotatable-handle {
  background: #f5dc58;
  border: 1px solid #FFF;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -webkit-border-radius: 50%;
  cursor: pointer;
  opacity: 0.4;
  width: 23px;
  height: 23px;
  left: 47%;
  margin: 0 0 0 -5px;
  position: absolute;
  top: -9px;
  transition: all 0.3s ease 0s;
}

.ui-rotatable-handle:before {
  content: "\f021";
  font-family: FontAwesome;
  color: #ffffff;
  font-size: 16px;
  padding-right: 0.5em;
  position: absolute;
  top: -1px;
  left: 4px;
}

.ui-rotatable-handle:hover {
  opacity: 1;
}

JavaScript

var app = angular.module("app", ["xeditable"]);

app.run(function(editableOptions) {
  editableOptions.theme = 'bs3';
});

app.controller('Ctrl', function($scope) {
  $scope.user = {
    name: 'awesome user'
  };
});

app.directive('resizable', function() {
  return {
    restrict: 'A',
    link: function postLink(scope, elem, attrs) {
      elem.draggable({
        containment: ".container",
        cursor: "move",
        opacity: 0.3
      });
      elem.resizable();
      elem.on('resizestop', function(evt, ui) {
        if (scope.callback) {
          scope.callback();
        }
      });
    }
  };
});