jQuery在拖动时使用右键单击旋转div

Question

我正在为我正在开发的游戏使用拖放界面。我目前正在使用 jQuery 可拖动和可放置来管理我的还原、限制、网格捕捉等，但我也想让它使得如果用户在拖动时右键单击，游戏块会旋转但不会停止拖动。但是，即使我在右键单击时放置了带有event.stopPropagation() 和event.preventDefault() 的事件侦听器，鼠标右键单击也会自动结束拖动事件。任何想法如何实现这一目标？

我在这里有一个半工作的 sn-p，右键单击确实会旋转游戏块，但会导致拖动停止。请注意，从我的源代码复制它会导致一些缩放和偏移，但用于此演示目的的功能仍然完好无损。

var board = function(parentDIV, size, options = {}) {
    this.ship = this.ship.bind(this);
    this.flip = this.flip.bind(this);
    this.update = this.update.bind(this);
    this.ajaxExport = this.ajaxExport.bind(this);
    this.scale = this.scale.bind(this);
    
    this.size = size / 10;
    this.callback = {
        onvalid: options.onvalid,
        oninvalid: options.oninvalid,
        ondrag: options.ondrag,
        onstart: options.onstart,
        ondrop: options.ondrop
    };
    
    this.containerDIV = $("<div>").css({"position": "relative", "padding": "-1px"}).attr("id", "board-container");
    this.boardDIV = $("<div>").css({"display": "table", "border-collapse": "collapse"}).on("contextmenu", function() { event.stopPropagation; event.preventDefault(); });
    var rowDIV = $("<div>").css({"display": "table-row"});
    var cellDIV = $("<div>").css({"display": "table-cell", "border": "2px #000 solid", "padding": "-1px", "width": this.size.toString() + "px", "height": this.size.toString() + "px"})
    for(var i = 0; i < 10; i++) {
        var cloneRow = rowDIV.clone();
        for(var ii = 0; ii < 10; ii++) cloneRow.append(cellDIV.clone());
        this.boardDIV.append(cloneRow);
    }
    
    this.ships = [
        this.ship("carrier", 1, 5, 1, 1),
        this.ship("battleship", 4, 1, 4, 3),
        this.ship("cruiser", 1, 3, 8, 6),
        this.ship("submarine", 3, 1, 2, 8),
        this.ship("destroyer", 1, 2, 0, 8)
    ];
    

    this.containerDIV.append(this.boardDIV);
    $(parentDIV).append(this.containerDIV);
    

    this.update();
};
board.prototype.update = function() {
    this.layout = [
        [0,0,0,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0]
    ];
    
    for(var i = 0; i < this.ships.length; i++) {
        var width = depx(this.ships[i].css("width")) / this.size;
        var height = depx(this.ships[i].css("height")) / this.size;
        var left = depx(this.ships[i].css("left")) / this.size;
        var top = depx(this.ships[i].css("top")) / this.size;
        
        if(width == 1) for(var ii = top; ii < top + height; ii++) this.layout[ii][left] = i + 1;
        if(height == 1) for(var ii = left; ii < left + width; ii++) this.layout[top][ii] = i + 1;
    }
    
    var pattern = new RegExp(/(?=^[^1]*(?:1,1,1,1,1|1\D+[^1]\D+[^1]\D+[^1]\D+[^1]\D+[^1]\D+[^1]\D+[^1]\D+[^1]\D+[^1]\D+1\D+[^1]\D+[^1]\D+[^1]\D+[^1]\D+[^1]\D+[^1]\D+[^1]\D+[^1]\D+[^1]\D+1\D+[^1]\D+[^1]\D+[^1]\D+[^1]\D+[^1]\D+[^1]\D+[^1]\D+[^1]\D+[^1]\D+1\D+[^1]\D+[^1]\D+[^1]\D+[^1]\D+[^1]\D+[^1]\D+[^1]\D+[^1]\D+[^1]\D+1)[^1]*$)(?=^[^2]*(?:2,2,2,2|2\D+[^2]\D+[^2]\D+[^2]\D+[^2]\D+[^2]\D+[^2]\D+[^2]\D+[^2]\D+[^2]\D+2\D+[^2]\D+[^2]\D+[^2]\D+[^2]\D+[^2]\D+[^2]\D+[^2]\D+[^2]\D+[^2]\D+2\D+[^2]\D+[^2]\D+[^2]\D+[^2]\D+[^2]\D+[^2]\D+[^2]\D+[^2]\D+[^2]\D+2)[^2]*$)(?=^[^3]*(?:3,3,3|3\D+[^3]\D+[^3]\D+[^3]\D+[^3]\D+[^3]\D+[^3]\D+[^3]\D+[^3]\D+[^3]\D+3\D+[^3]\D+[^3]\D+[^3]\D+[^3]\D+[^3]\D+[^3]\D+[^3]\D+[^3]\D+[^3]\D+3)[^3]*$)(?=^[^4]*(?:4,4,4|4\D+[^4]\D+[^4]\D+[^4]\D+[^4]\D+[^4]\D+[^4]\D+[^4]\D+[^4]\D+[^4]\D+4\D+[^4]\D+[^4]\D+[^4]\D+[^4]\D+[^4]\D+[^4]\D+[^4]\D+[^4]\D+[^4]\D+4)[^4]*$)(?=^[^5]*(?:5,5|5\D+[^5]\D+[^5]\D+[^5]\D+[^5]\D+[^5]\D+[^5]\D+[^5]\D+[^5]\D+[^5]\D+5)[^5]*$)^\[\[[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5]\],\[[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5]\],\[[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5]\],\[[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5]\],\[[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5]\],\[[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5]\],\[[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5]\],\[[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5]\],\[[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5]\],\[[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5]\]\]$/);
    
    if(pattern.test(JSON.stringify(this.layout))) if(this.callback.onvalid) this.callback.onvalid();
    else if(this.callback.oninvalid) this.callback.oninvalid();
    
    
    function depx(str) {
        return Number(str.substring(0, str.length - 2));
    }
};
board.prototype.ajaxExport = function() {
    var inputs = {
        type: "uploadGameBoard",
        game: null,
        board: this.layout
    };
    AJAXrequest("GET", inputs, function(response) {
        if(response == "success") {
            
        }
    });
};
board.prototype.random = function() {
    
};
board.prototype.default = function() {
    
};
board.prototype.scale = function() {
    console.log(this.containerDIV.parent());
};
board.prototype.set = function() {
    
};
board.prototype.ship = function(name, width, height, left, top) {
    return $("<div>")
        .attr("id", name)
        .addClass("ship")
        .draggable({
            containment: "parent",
            preventCollision: true,
            grid: [this.size, this.size], 
            cursor: "none", 
            start: function() { },
            stop: this.update,
            drag: this.validate })
        .css({
            "position": "absolute", 
            "width": (width * this.size).toString() + "px", 
            "height": (height * this.size).toString() + "px", 
            "background-color": "#000", 
            "top": (top * this.size).toString() + "px", 
            "left": (left * this.size).toString() + "px"})
        .on("contextmenu", function() { event.stopPropagation(); event.preventDefault(); })
        .on("mousedown", this.flip)
        .appendTo(this.boardDIV);
};
board.prototype.validate = function() {

};
board.prototype.flip = function() {
    if(event.which == 3) { 
        var ship = $(event.target); 
        var width = ship.css("height"); 
        var height = ship.css("width");
        var left = ship.css("left");
        var top = ship.css("top");
        
        ship.css({"width": width, "height": height}); 
        
        var offsetx = depx(width) + depx(left);
        var offsety = depx(height) + depx(top);
        var size = this.size * 10;
        
        if(offsetx > size) ship.css("left", String(size - depx(width)) + "px");
        else if(offsety > size) ship.css("top", String(size - depx(height)) + "px");
        
        this.update();
    }
    
    function depx(str) {
        return Number(str.substring(0, str.length - 2));
    }
};
board.prototype.disable = function() {
    for(var i = 0; i < this.ships.length; i++) this.ships[i].draggable( "option", "disabled", true );
};
board.prototype.enable = function() {
    for(var i = 0; i < this.ships.length; i++) this.ships[i].draggable( "option", "enable", true );
};

window.onload = function() {new board(document.body, 500); };

<!doctype html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <style>
      body {
        margin 0;
       }
    </style>
  </head>
  <body>
  </body>
</html>

Answer 1

我让它工作了......我不确定我到底做了什么改变，但是当我将 .on() 切换到这个时，它开始在大多数情况下按预期工作：

  .on({
    contextmenu: function(event) {
      console.log("EVENT: " + event.type, event.target.id);
      event.preventDefault();
      event.stopImmediatePropagation();
    },
    mousedown: me.flip,
    mouseup: function(event) {
      console.log("EVENT: " + event.type, event.target.id);
      console.log(event);
      if (event.which === 3) {
        return false;
      }
    }
  })

基本上，我可以看到发生的事件是mousedown、contextmenu 和mouseup 等事件会触发dragstop。 mouseup 是有意义的，因为 draggable 可能正在寻找该事件来触发 dragstop。

工作测试：https://jsfiddle.net/Twisty/ue2qpp2z/6/

JavaScript

function Board(parentDIV, size, options) {
  if (options == "undefined") {
    options = {};
  }

  var me = this;
  /**
  // Define Functions
  ***/
  this.ship = function(name, width, height, left, top) {
    console.log("Creating Ship: " + name, width, height, left, top);
    return $("<div>", {
        id: name,
        class: "ship"
      })
      .draggable({
        containment: "parent",
        preventCollision: true,
        grid: [me.size, me.size],
        cursor: "none",
        start: function(event, ui) {
          console.log("EVENT: " + event.type, event.target.id);
          console.log(event);
          me.dragging = true;
        },
        stop: function(event, ui) {
          console.log("EVENT: " + event.type, event.target.id);
          me.dragging = false;
          me.update.apply(me);
        },
        drag: function(event, ui) {
          console.log("EVENT: " + event.type, event.target.id);;
          //me.validate();
        }
      })
      .css({
        position: "absolute",
        width: (width * me.size).toString() + "px",
        height: (height * me.size).toString() + "px",
        "background-color": "#000",
        top: (top * me.size).toString() + "px",
        left: (left * me.size).toString() + "px"
      })
      .on({
        contextmenu: function(event) {
          console.log("EVENT: " + event.type, event.target.id);
          event.preventDefault();
          event.stopImmediatePropagation();
        },
        mousedown: me.flip,
        mouseup: function(event) {
          console.log("EVENT: " + event.type, event.target.id);
          console.log(event);
          if (event.which === 3) {
            return false;
          }
        }
      })
      .appendTo(me.boardDIV);
  };

  this.flip = function(event) {
    if (event.which == 3) {
      console.log("EVENT: " + event.type, event.target.id);
      console.log("Performing Flip: ", event.target.id);
      var ship = $(event.target);
      var width = ship.css("height");
      var height = ship.css("width");
      var left = ship.css("left");
      var top = ship.css("top");

      ship.css({
        "width": width,
        "height": height
      });

      var offsetx = depx(width) + depx(left);
      var offsety = depx(height) + depx(top);
      var size = me.size * 10;

      if (offsetx > size) ship.css("left", String(size - depx(width)) + "px");
      else if (offsety > size) ship.css("top", String(size - depx(height)) + "px");
      if ($(event.target).hasClass("ui-draggable-dragging")) {
        // Restart Drag Event
        console.log("drag & mousedown, triggering `drag` again");
        $(event.target).trigger(jQuery.Event("drag"));
      }
      me.update(event);
    }

    function depx(str) {
      return Number(str.substring(0, str.length - 2));
    }
  };

  this.update = function(event) {
    console.log("Board Update");
    me.layout = [
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    ];

    for (var i = 0; i < me.ships.length; i++) {
      var width = depx(me.ships[i].css("width")) / me.size;
      var height = depx(me.ships[i].css("height")) / me.size;
      var left = depx(me.ships[i].css("left")) / me.size;
      var top = depx(me.ships[i].css("top")) / me.size;
      var ii;

      if (width == 1)
        for (ii = top; ii < top + height; ii++) me.layout[ii][left] = i + 1;
      if (height == 1)
        for (ii = left; ii < left + width; ii++) me.layout[top][ii] = i + 1;
    }

    var pattern = new RegExp(/(?=^[^1]*(?:1,1,1,1,1|1\D+[^1]\D+[^1]\D+[^1]\D+[^1]\D+[^1]\D+[^1]\D+[^1]\D+[^1]\D+[^1]\D+1\D+[^1]\D+[^1]\D+[^1]\D+[^1]\D+[^1]\D+[^1]\D+[^1]\D+[^1]\D+[^1]\D+1\D+[^1]\D+[^1]\D+[^1]\D+[^1]\D+[^1]\D+[^1]\D+[^1]\D+[^1]\D+[^1]\D+1\D+[^1]\D+[^1]\D+[^1]\D+[^1]\D+[^1]\D+[^1]\D+[^1]\D+[^1]\D+[^1]\D+1)[^1]*$)(?=^[^2]*(?:2,2,2,2|2\D+[^2]\D+[^2]\D+[^2]\D+[^2]\D+[^2]\D+[^2]\D+[^2]\D+[^2]\D+[^2]\D+2\D+[^2]\D+[^2]\D+[^2]\D+[^2]\D+[^2]\D+[^2]\D+[^2]\D+[^2]\D+[^2]\D+2\D+[^2]\D+[^2]\D+[^2]\D+[^2]\D+[^2]\D+[^2]\D+[^2]\D+[^2]\D+[^2]\D+2)[^2]*$)(?=^[^3]*(?:3,3,3|3\D+[^3]\D+[^3]\D+[^3]\D+[^3]\D+[^3]\D+[^3]\D+[^3]\D+[^3]\D+[^3]\D+3\D+[^3]\D+[^3]\D+[^3]\D+[^3]\D+[^3]\D+[^3]\D+[^3]\D+[^3]\D+[^3]\D+3)[^3]*$)(?=^[^4]*(?:4,4,4|4\D+[^4]\D+[^4]\D+[^4]\D+[^4]\D+[^4]\D+[^4]\D+[^4]\D+[^4]\D+[^4]\D+4\D+[^4]\D+[^4]\D+[^4]\D+[^4]\D+[^4]\D+[^4]\D+[^4]\D+[^4]\D+[^4]\D+4)[^4]*$)(?=^[^5]*(?:5,5|5\D+[^5]\D+[^5]\D+[^5]\D+[^5]\D+[^5]\D+[^5]\D+[^5]\D+[^5]\D+[^5]\D+5)[^5]*$)^\[\[[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5]\],\[[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5]\],\[[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5]\],\[[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5]\],\[[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5]\],\[[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5]\],\[[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5]\],\[[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5]\],\[[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5]\],\[[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5],[0-5]\]\]$/);

    if (pattern.test(JSON.stringify(me.layout)))
      console.log("Update: Calling Callbacks");
    if (me.callback.onvalid) {
      console.log("Uopdate: Calling 'onvalid'");
      me.callback.onvalid.apply(me);
    } else if (me.callback.oninvalid) {
      console.log("Update: Calling 'oninvalid'");
      me.callback.oninvalid.apply(me);
    }

    function depx(str) {
      return Number(str.substring(0, str.length - 2));
    }

    if (event) {
      console.log("Update: Event found: " + event.type);
      if (event.type == "mousedown" && me.dragging) {
        $(event.target).trigger(jQuery.Event("dragstart"));
        event.stopImmediatePropagation();
      }
    }
  };

  this.scale = function() {
    console.log(me.containerDIV.parent());
  };

  this.disable = function() {
    console.log("Disable");
    for (var i = 0; i < me.ships.length; i++) me.ships[i].draggable("option", "disabled", true);
  };

  this.enable = function() {
    console.log("Enable");
    for (var i = 0; i < me.ships.length; i++) me.ships[i].draggable("option", "enable", true);
  };

  /***
  // Define Variables
  ***/

  this.size = size / 10;
  this.callback = {
    onvalid: options.onvalid,
    oninvalid: options.oninvalid,
    ondrag: options.ondrag,
    onstart: options.onstart,
    ondrop: options.ondrop
  };
  this.dragging = false;

  this.containerDIV = $("<div>").css({
    "position": "relative",
    "padding": "-1px"
  }).attr("id", "board-container");

  this.boardDIV = $("<div>").css({
    "display": "table",
    "border-collapse": "collapse"
  }).on("contextmenu", function(event) {
    console.log("EVENT: " + event.type, event.target.id);
    if ($(event.target).not(".ui-draggable-dragging")) {
      event.stopPropagation();
      event.preventDefault();
    }
  });

  var rowDIV = $("<div>").css({
    "display": "table-row"
  });

  var cellDIV = $("<div>").css({
    "display": "table-cell",
    "border": "2px #000 solid",
    "padding": "-1px",
    "width": this.size.toString() + "px",
    "height": this.size.toString() + "px"
  });

  for (var i = 0; i < 10; i++) {
    var cloneRow = rowDIV.clone();
    for (var ii = 0; ii < 10; ii++) cloneRow.append(cellDIV.clone());
    this.boardDIV.append(cloneRow);
  }

  this.ships = [
    this.ship("carrier", 1, 5, 1, 1),
    this.ship("battleship", 4, 1, 4, 3),
    this.ship("cruiser", 1, 3, 8, 6),
    this.ship("submarine", 3, 1, 2, 8),
    this.ship("destroyer", 1, 2, 0, 8)
  ];

  this.containerDIV.append(this.boardDIV);
  $(parentDIV).append(this.containerDIV);

  this.update();
}

$(function() {
  Board(document.body, 500, {});
});

希望对您有所帮助。

更新

我想我知道问题出在哪里，与事件 x 和 y 有关。当元素被翻转时，在某些情况下，鼠标不再在元素上，我认为这会导致dragstop 触发。我会看看我是否可以深入研究 jQuery UI，看看我是否可以找到 draggable 是如何处理这种情况的。