78501

How to enable resize on JsPlumb widget?

Am building a list of widgets with JSPlumb and AngularJS, i need to enable resize using the handler on each widget. There is an example already on it, i have implemented , but resize does not happen. here is my code,

<strong>HTML:</strong>

<div ng-controller="CustomWidgetCtrl" plumb-item class="item" resizeable>

<strong>App.js:</strong>

routerApp.directive('resizeable',function($compile){ return{ restrict: 'A', link: function(scope, element, attrs){ element.resizeable({ resize : function(event, ui) { jsPlumb.repaint(ui.helper); }, handles: "all" }); } };

Here is the Plunker

Output after implementing pankajparkar's code,

<img src="https://i.stack.imgur.com/D7qxT.png" alt="enter image description here">

<strong>My actual widget:</strong>

<div ng-controller="CustomWidgetCtrl" plumb-item class="item" style="margin: 20px; top: 50px; left: 110px; height: 480px; width: 400px; " ng-repeat="widget in dashboard.widgets" ng-style="{ 'left':widget.sizeX, 'top':widget.sizeY }" data-identifier="{{widget.id}}" resizeable >

Answer1:

No need to move jQuery before angularjs. Just wrap the element inside $, so that jQuery will understand that DOM and bind resizable event properly. Instead of link use compile if you are not dependent on scope and Compile is comparatively faster than link.

<strong>Directive code.</strong>

routerApp.directive('resizeable', function() { return { restrict: 'A', compile: function(element, attrs) { $(element).resizable({ resize: function(event, ui) { jsPlumb.repaint(ui.helper); }, handles: "all" }); } }; });

Working Plunkr

Hope this will helpful to you.

Answer2:

Two things seem to be wrong in your code.

First, you use .resizeable() but the function name is .resizable().

Second, you use element.resizable() but element is a jqLite object. In your html you load AngularJS first, then jQuery; you should load jQuery first.

Here is the updated plunkr.

Recommend

  • Angularjs - javascript not loading inside partial views
  • How do I make an custom drawn resizable container?
  • Android layout folder on different devices
  • I can't split action bar in android
  • How to make an app tablet compatible?
  • How to prevent sibling state controller from refreshing?
  • What is the dash (“-”) when used with pipe (“|”) in CMD?
  • Handle Authentication and Authorization in jax-rs webservice with cxf
  • How to add a “using” statement to the System.Data.Entity namespace [closed]
  • Compiling Element Causes Input Caret Position to Move to End
  • R h2o.glm - issue with max_active_predictors
  • Angular2 - Template reference inside NgSwitch
  • Using $compile in a directive triggers AngularJS infinite digest error
  • Set focus to first invalid form element in AngularJS
  • NUnit 3.0 TestCase const custom object arguments
  • Groovy: Unexpected token “:”
  • JSON response opens as a file, but I can't access it with JavaScript
  • dc-js disable selecting slices on click for pie chart
  • Uncaught Error: Could not find module `ember-load-initializers`
  • Read text file and split every line in MSBuild
  • req.body is undefined - nodejs
  • Modifying destination and filename of gulp-svg-sprite
  • Symfony2: How to get request parameter
  • Importing jscolor library in angular 2
  • Akka Routing: Reply's send to router ends up as dead letters
  • jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts
  • Is there a mandatory requirement to switch app.yaml?
  • Qt: Run a script BEFORE make
  • Django query for large number of relationships
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • Binding checkboxes to object values in AngularJs
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • How can I use `wmic` in a Windows PE script?
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?
  • Net Present Value in Excel for Grouped Recurring CF
  • How to push additional view controllers onto NavigationController but keep the TabBar?
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?