在 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;
}

here is the fiddle

在 div 上使用拖放和旋转

Using drag drop and rotation on a div

javascript

jquery

html

drag-and-drop

rotation