jquerygwtdraggablegwtquery

How to implement jquery rotatable plugin using gwtquery?

So I'm trying to implement this jquery plugin into a gwtquery one.

I'm using the Draggable . Most of the code is easily implemented in Gwtquery but I see have two problem area 1. with how events are handled: in jquery events are just passed to the function here is where they declare the draggable: _rotator.draggable({ helper: 'clone', revert: false, start: function (e) { e.stopPropagation(); e.stopImmediatePropagation();

      // Element Width & Height()
      dims = {
        'w': _this.width(),
        'h': _this.height()
      };

      // Center Coords
      center_coords = {
        'x': _this.offset().left + _this.width() * 0.5,
        'y': _this.offset().top + _this.height() * 0.5
      };
    },
    drag: function (e) {
      var mouse_coords, angle;

      e.stopPropagation();
      e.stopImmediatePropagation();

      _this.rotating = true;

      // Mouse Coords
      mouse_coords = {
        'x': e.pageX,
        'y': e.pageY
      };

Things to note here too is the dims??? for what was it declared still can't figure that out. But the code clearly stops propagation must be important The same code can't really be implement this way because access to the event isn't there

Here's my code 

 DraggableOptions dragOpts = new DraggableOptions();
            dragOpts.setHelper(HelperType.CLONE);
           dragOpts.setRevert(RevertOption.NEVER);
           dragOpts.setOnDragStart(new DragFunction(){
            @Override
            public void f(DragContext context) {

       centerCoords.setX(context.getDraggable().getOffsetLeft()    +    context.getDraggable().getOffsetWidth());
                centerCoords.setY(context.getDraggable().getOffsetTop() +     context.getDraggable().getOffsetTop());
            }});
        dragOpts.setOnDrag(new DragFunction(){

            @Override
            public void f(DragContext context) {
                final  Coordinate mouseCoords = GWT.create(Coordinate.class);
                Double angle;
                $(_this).mousemove(new Function(){
                    @Override
                    public boolean f(Event e){

                        mouseCoords.setX(e.getClientX());
                        mouseCoords.setY( e.getClientY());

                        return true;
                    }
                });

                angle = radToDeg(getAngle(mouseCoords, centerCoords)) - 90;

                rotate(angle);

            }});
        dragOpts.setOnDragStop(new DragFunction(){

            @Override
            public void f(DragContext context) {
                _this.rotating = false;

            }});


        $(rotator).as(Draggable).draggable(dragOpts );

DragContext doesn't give access to the event. If I implement the HandlerManager it won't have access to local variables. So my answer was to hack a mousemove function where I do have access to events. again this code only fires once in chrome and not at all in ie an ff

So how should I go about implementing this?

Solution

  • if you want to bind your own mousemove event handler, you should do it in the setOndragStart() method and put all your logic (angle computation + call to rotate function) in the handler itself.

    Otherwise, you should be able to provide your own implementation of DragAndDropManager and find a way to share your variable with this class.