个人中心
gpt4 book ai didi

javascript - 在 div 上使用拖放和旋转

转载 作者：行者123 更新时间：2023-12-03 10:25:19 24 4
gpt4 key购买 nike

你好，我需要你在单个 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>

最佳答案

你最好重写一下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

关于javascript - 在 div 上使用拖放和旋转，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29433546/

24 4 0
文章推荐： javascript - jQuery keypress() - 获取所有字符，直到按下 Enter 键
文章推荐： javascript - AngularJs 从列表动态创建指令
文章推荐： javascript - JSSOR 将当前图像的标签显示为缩略图
文章推荐： ruby-on-rails - 工厂女孩什么时候在数据库中创建对象？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com