如何获取本地页面DIV内容和发布

Question

如何获取本地页面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。现在我想添加一个表单方法帖子和一个提交按钮

在提交它将张贴到也许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

Answer 1

获取图像的编号：

<script> 
$(document).ready(function(){ 
$("#sub").submit(function(){ 
    var img1 = $($("#div2").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> 

HTML代码：添加表单标签

<form action="" id="sub"> 
<table> 
<tr> 
<td><p><b>Main Image</b></p><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> </div></td> 
<td><p><b>Image 2</b></p><div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> </td> 
<td><p><b>Image 3</b></p><div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td> 
</tr> 
</table> 

<img id="drag1" ondrop="drop(event)" draggable="true" width="150" height="150" ondragstart="drag(event)" src="http://netdna.webdesignerdepot.com/uploads/2013/02/thumbnail32.jpg" alt="img01"/></a> 
<img id="drag2" ondrop="drop(event)" draggable="true" width="150" height="150" ondragstart="drag(event)" src="http://netdna.webdesignerdepot.com/uploads/html5-css3-wireframing/html5-logo.jpg" alt="img02"/></a> 
<img id="drag3" ondrop="drop(event)" draggable="true" width="150" height="150" ondragstart="drag(event)"src="http://netdna.webdesignerdepot.com/uploads/2012/12/thumb-1.jpg" alt="img03"/></a> 
<input type="submit" value="send"> 
</form>