私の問題は、私が Jquery を初めて使用することだと思います。私の質問:これは可能ですか? 何か/何かを削除するために押したときに機能するボタンがありました。単に div id と入力値を使用してそれを識別し、アクションを実行しました (私は php/html を使用しました)。ボタンを使用/押すことなく、ドラッグアンドドロップを使用してまったく同じものを削除したいと思います。ドラッグ アンド ドロップを使用して、ボタン アクションを有効にします。このスクリプト (jquery ライブラリを使用) といくつかの単純な html/php を使用しました。
<div id="image_manager">
<form action="" method="post" enctype="multipart/form-data" id="delete_picture_form" >
<input type="hidden" name="action" value="delete_image"/>
<input type="submit" value="DELETE IMAGE" />
</form>
</div>
//when I drag image below, I want it to act as if I pressed the working button above
<img src="../../images/<?php echo $product['productCode']; ?>_s.png">
<div class="trash" >
<img src="trashh.png" />
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#image_manager> form').draggable({
revert: 'invalid'
});
$('.trash').droppable({
activeClass: 'highlight',
hoverClass: 'highlight-accept',
drop: function(event, ui) {
puffRemove($(ui.draggable));
}
});
});
function puffRemove(which) {
var $this = $(which),
image_width = 128,
scale_factor = $this.outerWidth() / image_width,
frame_count = 5,
$trash, $puff;
// create container
$trash = $('<div class="puff"></div>')
.css({
height: $this.outerHeight(),
left: $this.offset().left,
top: $this.offset().top,
width: $this.outerWidth(),
position: 'absolute',
overflow: 'hidden'
})
.appendTo('body');
// add the animation image
$puff = $('<img class="puff" src="epuff.png"/>')
.css({
width: image_width * scale_factor,
height: (frame_count * image_width) * scale_factor
})
.data('count', frame_count)
.appendTo($trash);
// remove the original element
$this.animate({
opacity: 0 }, 'fast').remove();
// or even
// $this.fadeOut('fast');
(function animate() {
var count = $puff.data('count');
if(count) {
var top = frame_count - count;
var height = $puff.height() / frame_count;
$puff.css({
"top": - (top * height),
'position': 'absolute'
});
$trash.css({
'height': height
})
$puff.data("count", count - 1);
setTimeout(animate, 75);
}
else { $puff.parent().remove();
//I added the below to fetch the form's div id and value which was used by the button
document.getElementById("image_manager").value=document.getElementById("delete_picture_form ").value.appendTo($puff) }})();}