在div上使用拖放和旋轉

你好，我需要你把旋轉以及拖放到一個單獨的div ..我試過下面的代碼，但只有當表單加載後，我可以拖放它被禁用。我可以在任何時候旋轉，但無法拖放...請幫助！在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>

來源

2015-04-03 Rebecca

你最好重寫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

來源

2015-04-03 15:36:43 mzografski

在div上使用拖放和旋轉

回答

相關問題