在div上使用拖放和旋轉

Question

您好，我需要在單個div上進行旋轉以及拖放操作。我嘗試了以下代碼，但僅在表單加載時才可以拖放，之后將其禁用。 我可以隨時旋轉，但無法拖放...請幫助！

 <style>
  #mainTarget{
width:300px; 
height:200px; 
position:relative;
top:100px; 
left:25%
}

.mainTarget{position:absolute; width:300px; height:200px;}

#target{
position:absolute;
height:20px;
width:20px;
background:url(http://files.softicons.com/download/system-icons/human-o2-icons-by-oliver-scholtz/png/128x128/actions/object-rotate-left.png) no-repeat top center #ffffff;
background-size:100%;
cursor:pointer; 
z-index:1; 
top:0; 
right:0;    
}
 #target1{
position:absolute;
height:20px;
width:20px;
background:url(http://files.softicons.com/download/system-icons/human-o2-icons-by-oliver-scholtz/png/128x128/actions/object-rotate-left.png) no-repeat top center #ffffff;
background-size:100%;
cursor:pointer; 
z-index:1; 
bottom:0; 
left:0;    
}

  #mainTarget1{

width:320px; 
height:200px; 
position:relative;

}

  .mainTarget1{position:absolute; width:300px; height:200px;}
</style>
<!DOCTYPE html>
<html>
<head>

<meta charset=utf-8 />
<title>JS Bin</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">                            </script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

 <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
 <body>

    <p>degrees</p>
   <span> rotate</span>
  <input type="text" id="style" name="style" /> 
 <div id="mainTarget">  
 <div >
 <img src="http://myreaxns.com/wp-content/uploads/2013/03/priyanka-chopra-  image.jpg" width="300" class="mainTarget" />


<div id="target">&nbsp;</div></div>
<div id="mainTarget1">
<img src="http://myreaxns.com/wp-content/uploads/2013/03/priyanka-chopra-image.jpg" width="300" class="mainTarget1" />
<div id="target1">&nbsp;</div>

</div>

</div>

<script>
  var dragging = false;
  $(function() {
var target = $('#target');  
var target1 = $('#target1');
var mainTarget = $('#mainTarget');
var mainTarget1 = $('#mainTarget1');
var rad = mainTarget.width()/2;
var elOfs = mainTarget.offset();
var elPos = {
   x: elOfs.left,
   y: elOfs.top
};
target.mousedown(function() {
    $('#mainTarget').draggable({ disabled: true });
    dragging = true;
});
$(document).mouseup(function(a) {
var mPos = {
    x: a.pageX-elPos.x,
    y: a.pageY-elPos.y
  };
  var getAtan = Math.atan2(mPos.x-rad, mPos.y-rad);
  var getDeg = -getAtan/(Math.PI/180) + 135;  //135 = (180deg-45deg)


  $('span').text(getDeg);

    if (dragging) {
        mainTarget.css({transform: 'rotate(' + getDeg + 'deg)'});
    }
    $('#mainTarget').draggable({ disabled: true });
    dragging = false;
});

$(document).mousemove(function(e) {
  var mPos = {
    x: e.pageX-elPos.x,
    y: e.pageY-elPos.y
  };
  var getAtan = Math.atan2(mPos.x-rad, mPos.y-rad);
  var getDeg = -getAtan/(Math.PI/180) + 135;  //135 = (180deg-45deg)


  $('p').text(getDeg);
  var style_position = $("#mainTarget").attr("style");

        $("#style").val(style_position);
    if (dragging) {
        mainTarget.css({transform: 'rotate(' + getDeg + 'deg)'});
    }

});
$('#mainTarget').draggable();
$('#target1').mousemove(function() {
$('#mainTarget').draggable();
$("#mainTarget").attr("class","ui-draggable ui-draggable-handle ui-draggable-dragging");


});
$('#target1').mousedown(function() {

$('#mainTarget').draggable();
$("#mainTarget").attr("class","ui-draggable ui-draggable-handle ui-draggable-dragging");

});
$('#target1').mouseup(function() {

$("#mainTarget").attr("class","ui-draggable ui-draggable-handle ui-draggable-dragging");
$('#mainTarget').draggable();
 //dragging = true;
});

});

</script>

Answer 1

您最好重寫js。 重新開始，並為圖像定義兩個容器-一個用於旋轉的容器，另一個用於平移的容器。 還要弄清楚是否要使用可拖動的jQueryUI並堅持使用。 這是一個簡單的示例（根本沒有完善），僅使用代碼中的事件鼠標位置，不使用jQuery UI，並結合了兩個容器的概念：

 var dragging = false;
 var rotating = false;
 var target = $('#target');
 var target1 = $('#target1');
 var mainTarget = $('#mainTarget');
 var mainTarget1 = $('#mainTarget1');
 var rad = mainTarget.width() / 2;
 var elOfs = $('.mainTarget').offset();
 var elPos = {
      x: elOfs.left,
      y: elOfs.top
 }
 target.mousedown(function () {;
      dragging = false;
      rotating = true;
 });
 $(".mainTarget").mousedown(function (a) {
      dragging = true;
      rotating = false;
 });
 $(document).mouseup(function (a) {
      dragging = (dragging) ? false : dragging;
      rotating = (rotating) ? false : rotating;     
 });
 $(document).mousemove(function (e) {
      var mPos = {
          x: e.pageX - elPos.x,
          y: e.pageY - elPos.y
      };
      var getAtan = Math.atan2(mPos.x - rad, mPos.y - rad);
      var getDeg = -getAtan / (Math.PI / 180) + 135; //135 = (180deg-45deg)
      $('p').text(getDeg);
      var style_position = $("#mainTarget").attr("style");     
      $("#style").val(style_position);
      if (rotating) {
          $('#rotate').css({
              transform: 'rotate(' + getDeg + 'deg)'
          });
      }
      if (dragging) {
          mainTarget.css({
              transform: 'translate(' + mPos.x + 'px,' + mPos.y + 'px)'
          });
      }

 });

這是html：

<p>degrees</p> <span> rotate</span>

<input type="text" id="style" name="style" />
<div id="mainTarget">
    <div id="rotate">
        <img src="http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg" width="300" class="mainTarget" />
        <div id="target">&nbsp;</div>
    </div>
</div>

還有一項新的CSS規則：

#rotate{
    position:relative;
    width:300px;
    height:200px;
}

這是小提琴

在div上使用拖放和旋轉

問題描述

1 個解決方案

解決方案1
1 已采納 2015-04-03 15:36:43

在div上使用拖放和旋轉

問題描述

1 個解決方案

解決方案1 1 已采納 2015-04-03 15:36:43

解決方案1
1 已采納 2015-04-03 15:36:43