2

I have a grid consists of 4x4 divs, is it possible that I can drag col-head/row-head then make entire column/row divs to be dragged into another column/row? 

<div class="container">
    <div class="pin">0</div>
    <div class="grid col-head">1</div>
    <div class="grid col-head">2</div>
    <div class="grid col-head">3</div>
    <div class="grid row-head">4</div>
    <div class="grid">5</div>
    <div class="grid">6</div>
    <div class="grid">7</div>
    <div class="grid row-head">8</div>
    <div class="grid">9</div>
    <div class="grid">10</div>
    <div class="grid">11</div>
    <div class="grid row-head">12</div>
    <div class="grid">13</div>
    <div class="grid">14</div>
    <div class="grid">15</div>
</div>

but now I can only drag and drop one grid each time

var placeholder;
$(document).ready(function () {
    makeDraggable();
    function makeDraggable() {
        $(".grid").draggable({
            helper: "clone",
            start: function(e) {
              placeholder = e.target;
              $(placeholder).addClass("red");
            },
            stop: function(e){
              $(placeholder).removeClass("red");
              placeholder = null;
            }  

        });
        $(".grid").droppable({
            drop: function (e, ui) {
                $(placeholder).removeClass("red");
                placeholder = null;
                $(ui.draggable).clone().replaceAll(this);
                $(this).replaceAll(ui.draggable);
                makeDraggable();
            },
        });
    }
})

here's my code on: jsfiddle

Kara
  • 6,115
  • 16
  • 50
  • 57
victor wang
  • 21
  • 2
  • 1
    see [my answer here](http://stackoverflow.com/a/24467682/2333214) – T J Oct 18 '15 at 06:51
  • Maybe see [this](http://stackoverflow.com/a/24485802/2333214) or [this](http://stackoverflow.com/a/26960332/2333214) – T J Oct 18 '15 at 08:15
  • @TJ thank you for the help, but I don't really get it from you answer. let me state the question more detailed, as you can see in jsfiddle, what I want to do is let any two div in bottom right corner(3x3) can be swapped. furthermore, if I drag any row head div (ex:4,8,12), the entire row can be drag and swap with another row, if i drag any column head div(ex:1,2,3), the entire column can be drag and swap with another column, and "0" div is fixed. If you can provide the jsfiddle demo will be huge appreciate! – victor wang Oct 18 '15 at 08:19

0 Answers0