1
OK。私は可能な限り明確にしようとし、私が求めているものを助けるために私のソースコードを提供します。データベースからプルして電子メールにフォームを送信するJquery要素
私はこれらのドラッグ可能な要素をデータベースから取り出し、ある領域からドロップ可能/ソート可能な領域にドラッグします。それらは後で（私とユーザーに電子メールで）提出されることができるように、そこで収集されることを意図しています。私はフォームにコードをどのように書くべきかを理解しようとしています。その結果、電子メールに送信できる領域がソートされた後に取り出されると確信しています。
ここ（送信フォームの局面は、今とにかくちょうどプレースホルダに実装されていない）の参考のために私のコードです： jsfiddle：http://jsfiddle.net/Matuduke/Y86As/
<style>
.tooltip { position:fixed; top: 0;left: 0;z-index: 3; display: none;}
#send {float:left; position:relative; }
#column_en { float:inherit;}
#webwall { float:left; width:48%; padding: 3px; max-height:340px; min-height:340px; }
#collectborder { float:left; width:50%; min-height:340px; padding: 0px; }
#staticwall li {cursor: url(https://mail.google.com/mail/images/2/openhand.cur), default !important; list-style-type: none; margin: 6px 6px 6px 6px; padding: 1px; float: left; width: 84px; height: 144px; font-size:x-small; text-align: center; }
#collection { list-style-type:none; min-height:340px; float:left; min-width:500px; border:dashed;background:#fff; height:30%; padding: .5% ; } * html #collecton { height: 0em; }
#collection li { list-style-type:none; margin: 6px 6px 6px 6px; padding: 1px; float: left; width: 84px; height: 144px; font-size: 1em; text-align: center;}
</style>
<script>
$(function() {
var removeIntent = false;
$("#collection").sortable({
over: function() {
removeIntent = false;
},
out: function() {
removeIntent = true;
},
beforeStop: function (event, ui) {
if(removeIntent == true){
ui.item.remove();
}
}
});
$("#collection").disableSelection();
});
$(document).ready(function() {
var source;
var destination;
var fn = function(event, ui) {
toDrop = $(ui.draggable).clone();
if ($("#collection").find("li[uIdentity=" + toDrop.attr("uIdentity") + "]").length >= 0) {
$("#collection").prepend(toDrop);
}
else
return false;
};
$("#staticwall li, #collection li").draggable({
helper: 'clone',
hoverClass: "ui-state-default"
});
$("#collection").droppable({
accept: "#staticwall li" ,
drop: fn
});
});
$("#staticwall li").setPos('0,0');
$('#staticwall').tinyscrollbar();
$(function() {
$("#collection li").draggable({
revert: true
});
});
</script>
</head>
<body>
<div id="column_en">
<div id="webwall">
Choose the pieces to add to your collection:
<ul style="overflow:auto;height:300px;animation-timing-function:ease-in-out;" id="staticwall" class="ui-state-default">
<?php
mysql_connect('localhost','user,'pass');
mysql_select_db("houstop9_Spiritiles");
$result = mysql_query("SELECT thumb, title, quote, sku FROM spiritiles ORDER BY `spiritiles`.`sku` DESC LIMIT 0, 120");
// print the list items
while ($row = mysql_fetch_array($result)) {
echo "<li uIdentity='1' class='ui-state-default'>{$row['thumb']}\n {$row['sku']}</li>";
}
?>
</ul>
</div>
<div>Create your Collection here: </div>
<div id="collectborder" >
<ul id="collection" class="ui-state-default">
</ul>
<div id="send"><form>
<input type="text" accept="">
<input type="image" accept="">
<input type='submit' name='submit' value='Send Tiles'></form>
</div>
</div>
</div>
</body>
EDIT：OK 私は私が得ると思います何を言っているのですが、私はJQueryのgetメソッドを理解しているとは確信していません。私は私がフォームを送信するとき、それは実行させるしようとしてきたが、私はそれをすべてアップfudgingいると思う：
function getSku()
var myIds = new array();
$("#collection li").each(function(index, element){
getSelection(index + ': ' + $(this).text());
myIds.push(element.id);
});
}
$("form").submit(getSku);
何をしようとしているのか分かりません。あなたの投稿にjsfiddleを追加しました。 – MatuDuke
まあまあ、不明で申し訳ありません。そして、jsfiddleを追加するためのthx。その "あなたのコレクションを作成する"破線のボックスでは、ユーザーがそのボックスに落としたすべてのものを電子メールで私に送信できるようにしたい。オブジェクト自体ではなく、オブジェクトに置かれている各オブジェクトの名前。問題は、私がこれをどうやって行うのかを決めることができないことです。特に、各オブジェクトの名前とイメージがデータベースから取得されるためです。 – MirlyMir