перетащить с Рафаэлем - PullRequest
Новая
       3

перетащить с Рафаэлем

1 голос
/ 05 января 2011

Привет, я новичок в использовании библиотеки Raphael Javascript. Я пытаюсь создать простое перетаскивание;чтобы иметь возможность перетаскивать форму клона снаружи холста на холст R, и я хочу иметь возможность удалить выбранный клон, если пользователь щелкнет по нему (пользователь нажимает удалить выбранный клон, и клон удаляется).клон и вставьте его.Вот мой код: 

<html>  
<head>  
    <title>Raphael Play</title>  
   <script type="text/javascript" src="raphael.js"></script> 
   <script type="text/javascript" src="jquery.contextMenu.r2.js"></script>
   <style type="text/css"> 
   #canvas_container {   
           width: 500px;   
           border: 1px solid #aaa;   
        }   
    </style>
   <script>
window.onload = function() {
var nowX, nowY, w = 500, h=400, r=30, R = Raphael("canvas_container", w, h),
    c = R.circle(100, 100, r).attr({
    fill: "hsb(.8, 1, 1)",
    stroke: "none",
    opacity: .5,
    cursor: "move"
});

var clone=c.clone();

var start = function () {
    // storing original coordinates
    this.ox = this.attr("cx");
    this.oy = this.attr("cy");
    this.attr({opacity: 1});
},
move = function (dx, dy) {
    // move will be called with dx and dy
    // restrict movement of circle to within boundaries
   if (this.ox + dx <= w - r && 
       this.oy + dy <= h - r &&
       this.ox + dx >= 0 + r && 
       this.oy + dy >= 0 + r)
   {
        this.attr({cx: this.ox + dx, cy: this.oy + dy});
   } // else nothing
},
up = function () {
    // restoring state
    this.attr({opacity: .5});
};

clone.drag(move, start, up); 

};

// Create Context Menu

   </script>

</head>  
<body>  

    <div id="canvas_container"></div> 

</body>

Ответы [ 3 ]

0 голосов
/ 20 мая 2011

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

  2. Я также хочу скопировать клон и вставить его.

Я предлагаю использовать фоновое изображение и обрабатывать события (onkeypress) с помощью PHP ajax. Затем загрузите измененное фоновое изображение и измените jquery.attr ("style", "back.jpg")

Кстати, спасибо, например, я использую его здесь:

http://softm.org.ua/projects/roundsel-v1/

0 голосов
/ 23 июня 2013

Вот хорошая простая отправная точка для перетаскивания объектов. Посмотрите на страницу источника. Я надеюсь, это поможет вам.

http://raphaeljs.com/touches.html

0 голосов
/ 05 января 2011

Каждая фигура Рафаэля должна быть в пределах холста; это не может быть снаружи. Вам нужно будет заставить холст заполнить большую область, чтобы включить другие фигуры, возможно, с помощью стилей. Я не уверен, что будет хорошо работать с несколькими полотнами Рафаэля, так как вам нужно будет создать новую фигуру Рафаэля внутри другого холста, используя атрибуты другой фигуры. Вы могли бы сделать это, но я бы не стал это делать. Также будьте осторожны при использовании кнопки удаления с событиями JavaScript, так как она используется для навигации по браузеру.

...