如何获取本地页面 DIV 内容并发布
基本上让我解释一下我的问题
在这个页面jSFiddle
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
var new_img = $('#' + data).clone();
$('#' + ev.target.id).html(new_img);
}
</script>
我允许使用将图像拉入 div。现在我想添加一个表单方法 post 和一个提交按钮
提交时，它可能会发布到 page2.php 和 page2.php 需要获取 2 div 方块的内容，其中包含用户拉入的图像“名称”或“id”，或者可以说出用户选择的当前 div 内容。
我怎样才能做到这一点。谢谢！查看我的 jsFiddle 页面，以进一步了解我尝试询问的内容：)
谢谢 ！
我能想到的一件事是使用隐藏字段。我创建了 4 个隐藏字段，即 div1_selection 、 div2_selection 、 div3_selection 、 div4_selection ，它们的值最初为空白。
拖放时，它们的值将是放置在其上的 img 的 id。我的问题是如何获得在隐藏字段中放置和设置的 img 的值（如果隐藏字段方法有效）
更新的尝试：
<script>
$(document).ready(function(){
$("#sub").submit(function(){
var img1 = $($("#div1").html()).attr("id");
var img2 = $($("#div2").html()).attr("id");
var img3 = $($("#div3").html()).attr("id");
var img4 = $($("#div4").html()).attr("id");
$.ajax({
url: 'setImage.php?img1='+$img1+'&img2='+$img2+'&img3='+$img3+'&img4='+$img4,
type: 'GET',
success: function (data) {$("#newhtml").html(data);}
});
});
});
</script>
<form action="" method="post" id="sub">
// some codes as on jsFiddle
<div id="newhtml"></div>
我的setImage.php代码
<?php
$img1 = $_GET['img1'];
$img2 = $_GET['img2'];
$img3 = $_GET['img3'];
$img4 = $_GET['img4'];
echo "IMG 1" . $img1 . " | IMG 2 " . $img2 . " | IMG 3 " . $img3 . " | IMG 4 " . $img4;
?>
我尝试在 newhtml 上显示返回结果，但不起作用。我做的ajax实现有什么问题吗？
谢谢
最新更新：
<script>
$(document).ready(function(){
$("#input").click(function(){ var img1 = $($("#div2").html()).attr("id");
var img1 = $($("#div3").html()).attr("id");
var img2 = $($("#div3").html()).attr("id");
var img3 = $($("#div3").html()).attr("id");
var img4 = $($("#div4").html()).attr("id");
$.ajax({
url: 'setImage.php',
data:{image1:img1,image2:img2,image3:img3,image4:img4},
type: 'GET',
success: function (data) {
alert(data)
$("#newhtml").html(data);
}
});
});
});
</script>
变量没有发送过来，它只是返回默认的回显消息，但它似乎无法捕获 img1、img2、img3、img4 的值