JQuery/HTML5? Возможно, холст? линия манипуляции

Question

небольшая проблема у меня есть ...

Представьте ractangle сказать, 500 х 250 (легкий бит)

В прямоугольнике есть строка accross всю ширину.

Я хотел бы, чтобы пользователь мог перетаскивать эту строку вверх и вниз в пределах прямоугольника. (можно сделать довольно легко с помощью jqueryui draggable)

Я также хотел бы, чтобы пользователь мог щелкнуть по строке, чтобы разбить его, а затем иметь две строки (это то место, где я застрял). Также метод воссоединения двух линий вместе.

На самом деле, на самом деле не с того, с чего начать, любые идеи о том, где я должен искать, или подходящий плагин, который позволяет это?

Благодаря Matt

Answer 1

Я сделал example с использованием HTML5 Canvas и рамки KineticJS.

В начале есть только одна горизонтальная линия, и после того, как вы щелкнули ее один раз, останутся две оставшиеся строки, разбросанные точно там, где пользователь нажал.

Вот код:

var stage = new Kinetic.Stage({ 
    container: 'container' 
}); 

var layer = new Kinetic.Layer(); 

var rect = new Kinetic.Rect({ 
    x: 0, 
    y: 0, 
    width: 500, 
    height: 250, 
    fill: 'red' 
}); 
layer.add(rect); 

var line = new Kinetic.Rect({ 
    x: 0, 
    y: 0, 
    width: 500, 
    height: 2, 
    fill: 'black', 
    draggable: true, 
    dragBoundFunc: function (pos) { 
     return { 
      x: this.getAbsolutePosition().x, 
      y: pos.y 
     }; 
    } 
}); 
layer.add(line); 
stage.add(layer); 
stage.draw(); 

line.on('click', function(e){ 
    var y = line.getY(); 
    line.destroy(); 
    var line1 = new Kinetic.Rect({ 
     x: 0, 
     y: y, 
     width: e.x, 
     height: 2, 
     fill: 'black', 
     draggable: true, 
     dragBoundFunc: function (pos) { 
      return { 
       x: this.getAbsolutePosition().x, 
       y: pos.y 
      }; 
     } 
    }); 

    var line2 = new Kinetic.Rect({ 
     x: e.x, 
     y: y, 
     width: stage.getWidth()-e.x, 
     height: 2, 
     fill: 'black', 
     draggable: true, 
     dragBoundFunc: function (pos) { 
      return { 
       x: this.getAbsolutePosition().x, 
       y: pos.y 
      }; 
     } 
    }); 
    layer.add(line1); 
    layer.add(line2); 
    stage.add(layer); 
    stage.draw(); 
});