Boa tarde,
eu estou a fazer uma página onde faço o upload de uma imagem e depois faço o crop de uma parte dessa imagem. Mas o meu objectivo é fazer drag à imagem. A imagem abaixo é um exemplo do que eu quero:
![Imagem Colocada]()
O que está a preto será o background do body, o border a vermelho a caixa onde poderei fazer drag da imagem (e mais tarde a parte escolhida para fazer o crop).
De momento não consigo arrastar por causa dos z-index. Será que me poderiam ajudar?
Aqui está o código que tenho até agora:
Código (HTML):
eu estou a fazer uma página onde faço o upload de uma imagem e depois faço o crop de uma parte dessa imagem. Mas o meu objectivo é fazer drag à imagem. A imagem abaixo é um exemplo do que eu quero:
O que está a preto será o background do body, o border a vermelho a caixa onde poderei fazer drag da imagem (e mais tarde a parte escolhida para fazer o crop).
De momento não consigo arrastar por causa dos z-index. Será que me poderiam ajudar?
Aqui está o código que tenho até agora:
Código (HTML):
<style>
body{margin:0; padding:0; background-color:#000;}
.demo{margin:auto; width:600px; z-index:-10;}
.draggable { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
#containment-wrapper { width: 95%; height:150px; border:2px solid #ccc; padding: 10px; z-index:10;}
#draggable4{border:none; background:none; z-index:-1;}
#square{border:2px solid #FFF; z-index:-10;}
</style>
<script>
$(function() {
$( "#draggable" ).draggable({ axis: "y" });
$( "#draggable2" ).draggable({ axis: "x" });
$( "#draggable3" ).draggable({ containment: "#containment-wrapper", scroll: false });
$( "#draggable4" ).draggable({ containment: "#demo-frame" });
$( "#draggable5" ).draggable({ containment: "parent" });
});
</script>
</head>
<body>
<div id="square">
<div class="demo">
<div id="containment-wrapper">
<div id="draggable4" class="draggable ui-widget-content">
<img src="../images/img.jpg" width="800" />
</div>
</div>
</div><!-- End demo -->
</div>
body{margin:0; padding:0; background-color:#000;}
.demo{margin:auto; width:600px; z-index:-10;}
.draggable { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
#containment-wrapper { width: 95%; height:150px; border:2px solid #ccc; padding: 10px; z-index:10;}
#draggable4{border:none; background:none; z-index:-1;}
#square{border:2px solid #FFF; z-index:-10;}
</style>
<script>
$(function() {
$( "#draggable" ).draggable({ axis: "y" });
$( "#draggable2" ).draggable({ axis: "x" });
$( "#draggable3" ).draggable({ containment: "#containment-wrapper", scroll: false });
$( "#draggable4" ).draggable({ containment: "#demo-frame" });
$( "#draggable5" ).draggable({ containment: "parent" });
});
</script>
</head>
<body>
<div id="square">
<div class="demo">
<div id="containment-wrapper">
<div id="draggable4" class="draggable ui-widget-content">
<img src="../images/img.jpg" width="800" />
</div>
</div>
</div><!-- End demo -->
</div>