드래그하는 동안 jQuery를 사용하여 div를 오른쪽으로 회전하여 사용합니다.

Question

개발중인 게임에 드래그 앤 드롭 인터페이스를 사용하고 있습니다. 나는 현재 jQuery를 사용하여 드래그 앤 드롭, 그리드 스냅 등을 관리하고 있지만 드래그하는 동안 사용자가 마우스 오른쪽 버튼을 클릭하면 드래그하는 것을 멈추지 않도록하고 싶습니다. 그러나 마우스 오른쪽 버튼을 클릭하면 이벤트 리스너가 event.stopPropagation() 및 event.preventDefault() 인 경우에도 드래그 이벤트가 자동 종료됩니다. 어떤 아이디어가 이것을 달성하는 방법?

여기서 마우스 오른쪽 버튼을 클릭하면 게임 조각이 회전하지만 드래그가 멈추는 부분이 절반 정도 있습니다. 스케일링과 옵셋 기능을 사용하는 소스에서 복사하는 것이지만이 데모의 목적을위한 기능은 여전히 ​​손상되지 않습니다.

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/

자바 스크립트

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이 발생한다고 생각합니다. 나는 draggable이이 시나리오를 어떻게 다루는 지 알 수 있을지 알기 위해 jQuery UI를 파헤쳐 볼 수 있는지 알게 될 것이다.