如何使用gwtquery实现jquery可旋转插件?

时间:2014-07-29 03:48:01

标签: jquery gwt draggable gwtquery

所以我试图将this jquery插件实现到gwtquery中。

我正在使用Draggable 。大多数代码很容易在Gwtquery中实现,但我看到有两个问题区域1.如何处理事件: 在jquery事件中只传递给函数 这是他们宣布可拖动的地方:   _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
      };

// 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 }; 这里要注意的是暗淡的???因为它宣称仍然无法弄明白。 但代码明显停止传播必须是重要的 相同的代码无法以这种方式实现,因为事件的访问不存在

这是我的代码

 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不允许访问该事件。如果我实现HandlerManager,它将无法访问本地变量。所以我的答案是破解mousemove功能,我可以访问事件。再次,此代码仅在chrome中触发一次,而在ff

中根本不触发

那我该如何实现呢?

1 个答案:

答案 0 :(得分:0)

如果你想绑定自己的mousemove事件处理程序,你应该在setOndragStart()方法中执行它,并将所有逻辑(角度计算+调用旋转函数)放在处理程序本身。

否则,您应该能够提供自己的DragAndDropManager实现,并找到一种与此类共享变量的方法。