पोजीशनिंग समस्याओं को खींचें और छोड़ें + आईडी

Question

अपडेट करना मेरे stackoverflow दोस्तों को नमस्कार। मुझे आज कुछ समस्याएं हैं और उन्हें हल करने में आपकी मदद की ज़रूरत है। यदि आप किसी भी चीज़ के साथ मदद कर सकते हैं तो इसकी बहुत सराहना की जाएगी! क्योंकि मुझे वास्तव में इस परियोजना को खत्म करने की जरूरत है।

JSFiddle: https://jsfiddle.net/rdxmmobe/1/

यह स्क्रिप्ट है:

<script type="text/javascript"> 
$(function(){ 
$(".DraggedItem").draggable({ 
     helper:'clone', 
     cursor:'move', 
     opacity: 0.7 
}); 

$('#rang1').droppable({ 
    drop: function(ev, ui) { 
     $('#rang1input').val($(ui.draggable).attr('id')); 
     var dropped = ui.draggable; 
     var droppedOn = $(this); 
     $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn); 
    } 
}); 

$('#rang2').droppable({ 
    drop: function(ev, ui) { 
     $('#rang2input').val($(ui.draggable).attr('id')); 
     var dropped = ui.draggable; 
     var droppedOn = $(this); 
     $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn); 
    } 
}); 

$('#rang3').droppable({ 
    drop: function(ev, ui) { 
     $('#rang3input').val($(ui.draggable).attr('id')); 
     var dropped = ui.draggable; 
     var droppedOn = $(this); 
     $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn); 
    } 
}); 

$('#rang4').droppable({ 
    drop: function(ev, ui) { 
     $('#rang4input').val($(ui.draggable).attr('id')); 
     var dropped = ui.draggable; 
     var droppedOn = $(this); 
     $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn); 
    } 
}); 

$('#rang5').droppable({ 
    drop: function(ev, ui) { 
     $('#rang5input').val($(ui.draggable).attr('id')); 
     var dropped = ui.draggable; 
     var droppedOn = $(this); 
     $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn); 
    } 
}); 

$('#rang6').droppable({ 
    drop: function(ev, ui) { 
     $('#rang6input').val($(ui.draggable).attr('id')); 
     var dropped = ui.draggable; 
     var droppedOn = $(this); 
     $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn); 
    } 
}); 

$('#rang7').droppable({ 
    drop: function(ev, ui) { 
     $('#rang7input').val($(ui.draggable).attr('id')); 
     var dropped = ui.draggable; 
     var droppedOn = $(this); 
     $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn); 
    } 
}); 
}); 
</script> 

ये 7 droppable divs (जहां छवियों ड्रॉप कर सकते हैं) कर रहे हैं:

<form action="<?php echo $_SERVER["PHP_SELF"] ?>" method="POST"> 
<input type="hidden" value="<?php echo $row["IDBewoner"] ?>" name="bewoner"> 
<td> 
    <div id="rang1"></div> 
    <input type="hidden" value="" id="rang1input" name="rang1value"> 
</td> 
<td> 
    <div id="rang2"></div> 
    <input type="hidden" value="" id="rang2input" name="rang2value"> 
</td> 
<td> 
    <div id="rang3"></div> 
    <input type="hidden" value="" id="rang3input" name="rang3value"> 
</td> 
<td> 
    <div id="rang4"></div> 
    <input type="hidden" value="" id="rang4input" name="rang4value"> 
</td> 
<td> 
    <div id="rang5"></div> 
    <input type="hidden" value="" id="rang5input" name="rang5value"> 
</td> 
<td> 
    <div id="rang6"></div> 
    <input type="hidden" value="" id="rang6input" name="rang6value"> 
</td> 
<td> 
    <div id="rang7"></div> 
    <input type="hidden" value="" id="rang7input" name="rang7value"> 
</td> 
<input type="submit" value="Save"> 
</form> 

और ये खींचने योग्य छवियां हैं (छवियां जिन्हें आप खींच सकते हैं) वे fr आते हैं ओम एक डेटाबेस है और अलग पहचान-पत्र:

if($_SERVER["REQUEST_METHOD"] == "POST") { 
$rang1 = $_POST["rang1value"]; 
$rang2 = $_POST["rang2value"]; 
$rang3 = $_POST["rang3value"]; 
$rang4 = $_POST["rang4value"]; 
$rang5 = $_POST["rang5value"]; 
$rang6 = $_POST["rang6value"]; 
$rang7 = $_POST["rang7value"]; 
$bewonerID = $_POST["bewoner"]; 

echo "<script>alert('Rang1: $rang1')</script>"; 
echo "<script>alert('Rang2: $rang2')</script>"; 
echo "<script>alert('Rang3: $rang3')</script>"; 
echo "<script>alert('Rang4: $rang4')</script>"; 
echo "<script>alert('Rang5: $rang5')</script>"; 
echo "<script>alert('Rang6: $rang6')</script>"; 
echo "<script>alert('Rang7: $rang7')</script>"; 
} 

सबसे पहले समस्या:

<td> <?php echo "<img class='DraggedItem' id='".$row["IDPictogram"]."' src='data:image/jpeg;base64,".base64_encode($row['Pictogram'])."' width='90' height='90' draggable='true'>"; ?> </td> 

इस php कोड है आप मेरी स्क्रिप्ट में देख सकते हैं इसके बाद के संस्करण मैं का इस्तेमाल किया " सहायक: 'क्लोन' 'लेकिन छवियों के साथ
"ड्रैगgedइटम" को स्थानांतरित किया जा रहा है और यह बिंदु नहीं है। छवियों को स्थानांतरित किया जाना चाहिए और 7 divs के बीच बदल दिया जाना चाहिए। लेकिन वे मूल सूची से क्लोन किए जाने की अपेक्षा की जाती है (तो मैं दो बार जैसे ही चिह्न का उपयोग कर सकते हैं)

दूसरा समस्या: मैं प्रत्येक div के लिए एक छिपा इनपुट है और वे
गिरा छवि के आईडी शामिल होना चाहिए इसलिए मैं उन्हें डेटाबेस में डाल सकता हूं। आइए बस कहना है कि मैंने Div1 (# rang1) पर एक छवि गिरा दी है, और फिर छवि को Div4 (# rang4) में ले जाया गया है, छवि की आईडी Div1 के छिपे हुए इनपुट में बनी हुई है और हटाई गई/अपडेट नहीं की गई है। मैं यह सुनिश्चित कैसे कर सकता हूं कि जब मैं div पर एक नई छवि ड्रॉप करता हूं तो आईडी भी अपडेट हो जाती है?

तीसरी समस्या: जब मैं मुख्य सूची से कोई छवि छोड़ता हूं, तो मैं एक चेक कैसे कर सकता हूं, यदि पहले से कोई छवि है, तो पुरानी छवि हटा दी जाती है और नए द्वारा प्रतिस्थापित किया जाता है?


चौथा समस्या: 2 छवियों के बीच स्विच करने का सबसे अच्छा तरीका क्या है?

तुम मुझे इन समस्याओं को यह बहुत सराहना की जाएगी में से किसी के साथ मदद कर सकते हैं !! मैं इन समस्याओं को हल किए बिना आगे नहीं जा सकता और मुझे वास्तव में विशेषज्ञों की मदद की ज़रूरत है।

Answer 1

मैं सभी कॉपी-पेस्ट कोड से छुटकारा पाने के लिए कोड के कुछ रिफैक्टरिंग के साथ शुरू करूंगा। Droppables को एक कॉल के साथ शुरू किया जा सकता है, कॉलबैक के भीतर प्रत्येक इनपुट को $(this).next('input') के रूप में संदर्भित किया जा सकता है।

अगला, मैं आईडी डुप्लिकेशंस से बचने के लिए छवियों को सीधे गिराए गए फ़ील्ड में क्लोन नहीं करूँगा। मैं स्लॉट के अंदर एक अलग वर्ग के साथ नए छवि तत्व बनाउंगा, क्योंकि स्लॉट्स के बीच स्थानांतरित होने पर उन्हें अलग-अलग व्यवहार करना होगा, मेरे उदाहरण में एक पारदर्शी सहायक के बिना।

तो मेरे उदाहरण में, आपके पास DraggedItem छवियां बिना परिवर्तन किए हैं। मैंने प्रत्येक ड्रॉपपेल स्लॉट में DropZone कक्षा को एक कॉल के साथ प्रारंभिकरण की अनुमति देने के लिए जोड़ा।

जब कोई छवि गिरा दी जाती है, तो मैं जांचता हूं कि यह कहां से आया था। यदि यह लाइब्रेरी से आया है, तो एक नया छवि तत्व बनाएं, मूल से मिलान करने के लिए src सेट करें और यदि आवश्यक हो तो ट्रैक रखने के लिए मूल आइटम आईडी में data-id डेटा विशेषता सेट करें। एक अंतिम चरण के रूप में, मैं DroppedItem कक्षा जोड़ता हूं और इसे एक सहायक के बिना खींचने योग्य बनाता हूं।

यदि आइटम गिरा दिया गया है तो DroppedItem है, यानी एक अलग स्लॉट से आया है, बस कंटेनरों की सामग्री को स्वैप करें और input बॉक्स मानों को स्वैप करें।

एचटीएमएल

<table> 
    <tr> 
     <td> 
      <div id="rang1" class="DropZone"></div> 
      <input type="text" value="" id="rang1input" name="rang1value" /> 
     </td> 
     <td> 
      <div id="rang2" class="DropZone"></div> 
      <input type="text" value="" id="rang2input" name="rang2value" /> 
     </td> 
     <td> 
      <div id="rang3" class="DropZone"></div> 
      <input type="text" value="" id="rang3input" name="rang3value" /> 
     </td> 
     <td> 
      <div id="rang4" class="DropZone"></div> 
      <input type="text" value="" id="rang4input" name="rang4value" /> 
     </td> 
     <td> 
      <div id="rang5" class="DropZone"></div> 
      <input type="text" value="" id="rang5input" name="rang5value" /> 
     </td> 
     <td> 
      <div id="rang6" class="DropZone"></div> 
      <input type="text" value="" id="rang6input" name="rang6value" /> 
     </td> 
     <td> 
      <div id="rang7" class="DropZone"></div> 
      <input type="text" value="" id="rang7input" name="rang7value" /> 
     </td> 
    </tr> 
</table> 
<img id="img1" class="DraggedItem" src="http://dummyimage.com/50x50/000/fff&text=1" /> 
<img id="img2" class="DraggedItem" src="http://dummyimage.com/50x50/000/fff&text=2" /> 
<img id="img3" class="DraggedItem" src="http://dummyimage.com/50x50/000/fff&text=3" /> 
<img id="img4" class="DraggedItem" src="http://dummyimage.com/50x50/000/fff&text=4" /> 
<img id="img5" class="DraggedItem" src="http://dummyimage.com/50x50/000/fff&text=5" /> 
<img id="img6" class="DraggedItem" src="http://dummyimage.com/50x50/000/fff&text=6" /> 
<img id="img7" class="DraggedItem" src="http://dummyimage.com/50x50/000/fff&text=7" /> 

सीएसएस

table { margin-bottom: 50px; } 
td div { width: 50px; height: 50px; border:1px solid silver; margin-bottom: 10px;} 
td input { width: 50px; } 

जावास्क्रिप्ट

$('.DraggedItem').draggable({ 
    helper: 'clone', 
    cursor:'move', 
    opacity: 0.7 
}); 

var droppedOptions = { 
    revert: 'invalid', 
    cursor: 'move' 
}; 

$('.DropZone').droppable({ 
    drop: function(ev, ui) { 
     var dropped = ui.draggable; 
     var droppedOn = $(this); 

     if(ui.draggable.is('.DroppedItem')) { 
      // Item is dragged from another slot, swap images 

      var draggedFrom = ui.draggable.parent(); 
      droppedOn.find('img').appendTo(draggedFrom); 
      dropped.css({ top:0, left:0 }).appendTo(droppedOn); 

      var temp = '' + droppedOn.next('input').val(); 
      draggedFrom.next('input').val(temp); 
      droppedOn.next('input').val(dropped.data('id')); 
     } else { 
      // Item is dragged from library 

      droppedOn 
       .empty() // Delete already dropped items 
       .next('input') 
        .val(dropped.attr('id')); 

      $('<img class="DroppedItem">') 
       .attr('src', dropped.attr('src')) 
       .data('id', dropped.attr('id')) 
       .draggable(droppedOptions) 
       .appendTo(droppedOn); 
     } 
    } 
}); 

JS Fiddle example

ध्यान दें कि मेरे उदाहरण में मैंने इनपुट प्रकार को text पर प्रदर्शित करने के लिए बदल दिया है, बस इसे hidden पर बदलें जिसे आप सेट कर चुके हैं।

Answer 2

यहाँ मैं क्या किया है: https://jsfiddle.net/Twisty/rdxmmobe/3/

$(function() { 
    $(".DraggedItem").draggable({ 
     helper: 'clone', 
     cursor: 'move', 
     opacity: 0.7, 
     revert: true 
    }); 

    $("div[id^='rang']").droppable({ 
     drop: function (ev, ui) { 
      var target = $("#" + $(this).attr("id") + "input"); 
      target.val($(ui.draggable).attr('id')); 
      var dropCopy = $("<img>"); 
      console.log("Setting DropCopy Source: " + $(ui.draggable).attr('src')); 
      $(dropCopy).attr('src', $(ui.draggable).attr('src')); 
      var droppedOn = $(this); 
      droppedOn.append(dropCopy).css({ 
       top: 0, 
       left: 0 
      }); 
     } 
    }); 
});