RaphaelJS 팔레트 동작

Question

raphaelJS에서 팔레트 동작 (요소를 '팔레트'에서 '캔버스'로 끌어서 놓는 방법)을 만들려면 어떻게해야합니까?

Answer 1

당신은 모든 팔레트 요소에이 startFunction 추가해야합니다 :

move: function (dx, dy) { 
    // calculate translation coords 
    var new_x = dx - this.ox; 
    var new_y = dy - this.oy; 

    // transforming coordinates 
    this.transform('...T' + new_x + ',' + new_y); 

    // save the new values for future drags 
    this.ox = dx; 
    this.oy = dy; 
} 

을 그리고 마지막으로, 함수에서 실행 : 요소가 드래그되는 동안

//DragFunctions is the object that has all the 3 d&d methods, clearer in the complete file 
paletteStart: function() { 
    // keep the relative coords at the start of the drag 
    this.ox = 0; 
    this.oy = 0; 

    // as we are dragging the palette element, we clone it to leave one in his place. 
    var newPaletteObj = this.clone(); 

    //we give the new palette element the behaviour of a palette element 
    DragFunctions.addDragAndDropCapabilityToPaletteOption(newPaletteObj); 

    //nice animation 
    this.animate({ 
     "opacity": 0.5 
    }, 500); 
} 

이제 우리는 기능을 필요를 끝내기 완료 :

paletteUp: function() { 
    if (!DragFunctions.isInsideCanvas(this)) { 
     this.remove(); 
     //notify the user as you want! 
    } else { 
     //Giving the new D&D behaviour 
     this.undrag(); 
     //give the element the new d&d functionality! 
     this.animate({ 
      "opacity": 1 
     }, 500); 
    } 
} 

2 요소가 dr이면 opped라면 팔레트의 동작을 제거하고 또 다른 것을 제공해야합니다 (평평한 d & d 기능). 그렇지 않으면 요소를 모두 복제합니다. 여기 내가 그들에게주고 당신에게 멋진 동작을 제공 :

start: function() { 
    // keep the relative coords at the start of the drag 
    this.ox = 0; 
    this.oy = 0; 
    // animate attributes to a "being dragged" state 
    this.animate({ 
     "opacity": 0.5 
    }, 500); 
}, 
//same move function 
up: function() { 
    if (!DragFunctions.isInsideCanvas(this)) { 
     this.animate({ 
      transform: '...T' + (-this.ox) + ',' + (-this.oy) 
     }, 1000, "bounce"); 
    } 
    this.animate({ 
     "opacity": 1 
    }, 500); 
}, 

//and the method that gives the behaviour 
addDragAndDropCapabilityToSet: function (compSet) { 
    compSet.drag(this.move, this.start, this.up, compSet, compSet, compSet); 
} 

을 그리고 당신은 또한 볼 수 있습니다, 우리는 요소가 캔버스 안에있는 경우가 여기에 매우 유용한 기능입니다 보는 검증이 있습니다

isInsideCanvas: function (obj) { 
    var canvasBBox = //get your 'canvas' 
    var objectBBox = obj.getBBox(); 
    var objectPartiallyOutside = !Raphael.isPointInsideBBox(canvasBBox, objectBBox.x, objectBBox.y) || !Raphael.isPointInsideBBox(canvasBBox, objectBBox.x, objectBBox.y2) || !Raphael.isPointInsideBBox(canvasBBox, objectBBox.x2, objectBBox.y) || !Raphael.isPointInsideBBox(canvasBBox, objectBBox.x2, objectBBox.y2); 
    return !(objectPartiallyOutside); 
} Finally, 
the place to call to give the element all this behaviour: 

//this works for elements and sets 
addDragAndDropCapabilityToPaletteOption: function (compSet) { 
    compSet.drag(this.move, this.paletteStart, this.paletteUp, compSet, compSet, compSet); 
} 

이의 데모는 구멍 코드는 github의의 요지에 comoformamos.com 라고하거나 코드에서 좀 더 깊이 싶어 그래서 만약 GitHub의에서 호스팅 내가 라파엘 함께 플레이하기 위해 만든 웹 사이트에 그것을 자유롭게해라.

이 블로그 항목에서 더 아름답게 설명했습니다. devhike, 저는 저자입니다.