CODEWITHSUNDEEP
javascripthtmlcssangularjsangularjs-directive
Gaurav_soni
Gaurav_soni

Reputation: 6114

How to switch position of div in directive

I have a directive that renders the following structure Directive output

In Div1 I have some content and in Div2 some other content. There is a splitter in the middle. I need a function to swap the div positions Div1 in Div2 position and vice versa. What as some good ways to do this in Angular directive ?

One way i can think of is using ng-switch, but will have to do some reputable stuff... any other good ways ? Some animation during switching would be cool.

No jQuery allowed. Following is the demo fiddle - http://jsfiddle.net/gauravsoni/z9gz1wgy/

Sample code:

 angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
  $scope.orientation = "horizontal";
  $scope.hello = "Hello from Controller!";
})

.directive('myDirective',function(){
    return{
    template:'<div kendo-splitter><div>1st pane</div><div>2nd pane</div></div>'
}
})

UPDATE: I am using the following code to do the switching, 

<button ng-click='toggle = !toggle'>Switch View</button>
<div ng-if="toggle">
    <div>
        Left side 
    </div>
    <div>
        right side
    </div>
</div>

<div ng-if="!toggle">
    <div>
        right side 
    </div>
    <div>
        left side
    </div>
</div>

So based on the toggle value appropriate div gets activated , only drawback here is i have to write the view 2 times.

Any suggestions ?

Upvotes: 1

Views: 1791

Answers (3)

tony
tony

Reputation: 945

There are multiple ways to do this, ones cleaner than others obviously.

If there are no other factors that can affect the method, that you use to resolve this problem and If the task is as simple as just switch positions, I guess you can define the container div (the one that contains both smaller divs) as flexbox with

display:flex

and 

flex-flow: row nowrap,

and then on hover, or on scroll, or toggle, or whatever it is... change flex-flow to flex-flow: row-reverse nowrap

If you need a bit of animation effect you can add transition: .5 to container div

Sorry if I'm not clear :(

Upvotes: 0

jessegavin
jessegavin

Reputation: 75650

You can use flexbox and define an order for the elements. Then use angular to toggle a class on the container. You could also use floats or some other CSS technique to mess around with the order, but the idea is to use CSS for this.

See demo below. http://codepen.io/jessegavin/pen/ZbWeNV

Template

<div ng-app="demo">

  <columns></columns>

  <script type="text/ng-template" id="columns.html">
    <div>
      <div class="columns">
        <div class="column column-one">Col 1</div>
        <div class="column column-two">Col 2</div>
      </div>
      <button ng-click="swap()">Swap</button>
    </div>
  </script>

</div>

CSS

.columns {
  display: flex;
}
.column-one { order: 1; }
.column-two { order: 2; }

.swapped {
  .column-one { order: 2; }
  .column-two { order: 1; }
}

.column {
  width: 50%;
  height: 200px;
  border: solid 1px red;
}

Directive 

angular.module("demo", [])
  .directive("columns", function() {

    return {
      templateUrl: "columns.html",
      link: function(scope, element, attrs) {

        scope.swap = function() {
          element.toggleClass("swapped");
        }

      }
    }
  })

Upvotes: 3

Imab Asghar
Imab Asghar

Reputation: 316

You could use angular ui sortable on this. You can easily drag and sort them. You can place handlers so only portion of div is able to drag the divs.

Upvotes: 0

Related Questions