我想我的麻烦是我是 Jquery 的新手。我的问题:这甚至可能吗?当我按下它以删除某些东西/任何东西时,我有一个按钮可以工作。它只是使用一个 div id 和一个 Input 值来识别它并执行操作(我使用了 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) }})();}