PDA

View Full Version : مبتدی: ثبت موارد drop شده در دیتا بیس



abotapa
پنج شنبه 15 اردیبهشت 1390, 11:43 صبح
سلام
من یه سری اسم دارم که با خاصیت drag & drop میتونم بندازمشون توی یه <div> حالا میخوام بدونم چجوری میتونم مواردی که داخل <div> هست رو در تشخیص بدم و ذخیرشون کنم!
ممنون اگه راهنماییم کنید

mehdi.mousavi
پنج شنبه 15 اردیبهشت 1390, 12:38 عصر
سلام.
لطفا کد HTML و JavaScript مورد استفاده خودتون رو اینجا قرار بدید تا راهنمایی کنم.

موفق باشید.

abotapa
پنج شنبه 15 اردیبهشت 1390, 13:26 عصر
ببینید من با این کد ها
$(function() {
// there's the ui_tag_list and the added_tag
var $ui_tag_list = $( "#ui_tag_list" ),
$added_tag = $( "#added_tag" );

// let the ui_tag_list items be draggable
$( "li", $ui_tag_list ).draggable({
cancel: "a.ui-icon", // clicking an icon won't initiate dragging
revert: "invalid", // when not dropped, the item will revert back to its initial position
helper: "clone",
cursor: "move"
});

// let the added_tag be droppable, accepting the ui_tag_list items
$added_tag.droppable({
accept: "#ui_tag_list > li",
activeClass: "ui-state-highlight",
drop: function( event, ui ) {
deleteImage( ui.draggable );
}
});

// let the ui_tag_list be droppable as well, accepting items from the added_tag
$ui_tag_list.droppable({
accept: "#added_tag li",
activeClass: "custom-state-active",
drop: function( event, ui ) {
recycleImage( ui.draggable );
}
});

// image deletion function
var recycle_icon = "<a href='#' title='Recycle this image' class='ui-icon ui-remove-tag'> -- </a>";
function deleteImage( $item ) {
$item.fadeOut(function() {
var $list = $( "ul", $added_tag ).length ?
$( "ul", $added_tag ) :
$( "<ul class='ui_tag_list ui-helper-reset'/>" ).appendTo( $added_tag );

$item.find( "a.ui-add-tag" ).remove();
$item.append( recycle_icon ).appendTo( $list ).fadeIn(function() {
$item
});
});
}

// برگردودن عکس
var added_tag_icon = "<a href='#' class='ui-add-tag'>+</a>";
function recycleImage( $item ) {
$item.fadeOut(function() {
$item
.find( "a.ui-remove-tag" ).remove().end().append( added_tag_icon ).appendTo( $ui_tag_list )
.fadeIn();
});
}


// دکمه حذف و بازگشت
$( "ul.ui_tag_list > li" ).click(function( event ) {
var $item = $( this ),
$target = $( event.target );

if ( $target.is( "a.ui-add-tag" ) ) {
deleteImage( $item );
} else if ( $target.is( "a.ui-remove-tag" ) ) {
recycleImage( $item );
}

return false;
});
});
و این هم کدهای html که شامل یه سری تگ و همچنین محلی که تگها توی اون ریخته میشه


echo "<div id=\"tag_list\">\n<ul id=\"ui_tag_list\" class=\"ui_tag_list\">";
while ($row = mysql_fetch_row($result))
{
echo "\n<li class=\"ui-widget-content\">".$row[1]."\n<a href=\"\" class=\"ui-add-tag\">+</a></li>";
}
echo "\n</ul></div>";

echo "<div id=\"added_tag\" class=\"ui-widget-content ui-state-default\">";
echo "</div>";

abotapa
پنج شنبه 15 اردیبهشت 1390, 13:27 عصر
ببینید من با این کد ها
$(function() {
// there's the ui_tag_list and the added_tag
var $ui_tag_list = $( "#ui_tag_list" ),
$added_tag = $( "#added_tag" );

// let the ui_tag_list items be draggable
$( "li", $ui_tag_list ).draggable({
cancel: "a.ui-icon", // clicking an icon won't initiate dragging
revert: "invalid", // when not dropped, the item will revert back to its initial position
helper: "clone",
cursor: "move"
});

// let the added_tag be droppable, accepting the ui_tag_list items
$added_tag.droppable({
accept: "#ui_tag_list > li",
activeClass: "ui-state-highlight",
drop: function( event, ui ) {
deleteImage( ui.draggable );
}
});

// let the ui_tag_list be droppable as well, accepting items from the added_tag
$ui_tag_list.droppable({
accept: "#added_tag li",
activeClass: "custom-state-active",
drop: function( event, ui ) {
recycleImage( ui.draggable );
}
});

// image deletion function
var recycle_icon = "<a href='#' title='Recycle this image' class='ui-icon ui-remove-tag'> -- </a>";
function deleteImage( $item ) {
$item.fadeOut(function() {
var $list = $( "ul", $added_tag ).length ?
$( "ul", $added_tag ) :
$( "<ul class='ui_tag_list ui-helper-reset'/>" ).appendTo( $added_tag );

$item.find( "a.ui-add-tag" ).remove();
$item.append( recycle_icon ).appendTo( $list ).fadeIn(function() {
$item
});
});
}

// برگردودن عکس
var added_tag_icon = "<a href='#' class='ui-add-tag'>+</a>";
function recycleImage( $item ) {
$item.fadeOut(function() {
$item
.find( "a.ui-remove-tag" ).remove().end().append( added_tag_icon ).appendTo( $ui_tag_list )
.fadeIn();
});
}


// دکمه حذف و بازگشت
$( "ul.ui_tag_list > li" ).click(function( event ) {
var $item = $( this ),
$target = $( event.target );

if ( $target.is( "a.ui-add-tag" ) ) {
deleteImage( $item );
} else if ( $target.is( "a.ui-remove-tag" ) ) {
recycleImage( $item );
}

return false;
});
});
و این هم کدهای html که شامل یه سری تگ و همچنین محلی که تگها توی اون ریخته میشه


echo "<div id=\"tag_list\">\n<ul id=\"ui_tag_list\" class=\"ui_tag_list\">";
while ($row = mysql_fetch_row($result))
{
echo "\n<li class=\"ui-widget-content\">".$row[1]."\n<a href=\"\" class=\"ui-add-tag\">+</a></li>";
}
echo "\n</ul></div>";

echo "<div id=\"added_tag\" class=\"ui-widget-content ui-state-default\">";
echo "</div>";