मेरे पास पृष्ठ के बाईं ओर एक स्क्रॉल करने योग्य सूची है (ओवरफ़्लो: ऑटो) और पृष्ठ के दाईं ओर कई ड्रॉपपैबल। मुझे क्लोन here का उपयोग करके किसी तत्व को सूची से किसी कंटेनर में खींचने की अनुमति देने के लिए एक वर्कअराउंड मिला, लेकिन जब तत्व गिरा दिया जाता है, तो यह स्थिति प्राप्त होती है: पूर्ण और एक शीर्ष और दाएं स्थिति जेड-इंडेक्स के साथ एक इनलाइन शैली में जोड़ दी जाती है जो मूल रूप से वहां था। संलग्न सभी अन्य वर्ग प्रतिलिपि में हैं, बस ड्रैग और ड्रॉप के बाद, उस तत्व को फिर से खींचा नहीं जा सकता है?स्क्रोल करने योग्य div से ड्रॉप करने योग्य कैसे खींचें और फिर फिर से खींचें?
क्या ऐसा करने का कोई तरीका है या क्लोनिंग प्रक्रिया द्वारा जोड़ा गया इनलाइन शैली को निकालने का कोई तरीका है?
समस्या दिखाते हुए सरलीकृत कोड नीचे दिखाया गया है - आपको बस एक पृष्ठ पर कट और पेस्ट करने और इसे जांचने के लिए अपने वेबूट में ड्रॉप करने में सक्षम होना चाहिए। अग्रिम में धन्यवाद।
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> </script>
<script>
$(document).ready(function() {
var dropped = false;
$(".container").droppable({
drop: function(event, ui) {
dropped = true;
$.ui.ddmanager.current.cancelHelperRemoval = true;
ui.helper.appendTo(this);
}
});
$(".item").draggable({
revert: 'invalid',
helper: function(){
$copy = $(this).clone();
return $copy;
},
start: function(event, ui) {
dropped = false;
$(this).addClass("hide");
},
stop: function(event, ui) {
if (dropped==true) {
$(this).remove();
} else {
$(this).removeClass("hide");
}
}
});
});
</script>
<style>
.scrollable {
margin-top:5px;
float:left;
height:140px;
width:60px;
overflow:auto;
}
.container {
height: 140px;
width: 160px;
float:left;
border:3px solid black;
margin:5px;
}
.item {
float:left;
height:40px;
width:40px;
}
.red {background-color: red; }
.black {background-color: black;color: white;}
.green {background-color: green;}
.blue {background-color: blue; color: white;}
.yellow {background-color: yellow;}
</style>
</head>
<body>
<div id="list" class="scrollable">
<div id="p1" class="item red">A</div>
<div id="p2" class="item black">B</div>
<div id="p3" class="item green">C</div>
<div id="p4" class="item blue">D</div>
<div id="p5" class="item yellow">E</div>
</div>
<div>
<div id="c1" class="container"></div>
<div id="c2" class="container"></div>
<div id="c3" class="container"></div>
</div>
</body>
मैं नहीं किया इस सुलझाने में असफल रहा और कोई नहीं अब तक एक सुझाव है, मैं एक अस्थायी समाधान सूची में स्क्रॉल करने उपयोगकर्ता PageUp और pagedn बटन के साथ एक div बना सकते हैं और अनुमति देने के लिए है जो लागू किया है गया है मैन्युअल रूप से। मैं केवल एन पंक्तियां दिखाता हूं और mysql से चुनने में सीमा कार्यक्षमता का उपयोग करके अपना खुद का पृष्ठांकन लागू करता हूं। इसका मतलब है कि डीआईवी को अतिप्रवाह लागू करने की आवश्यकता नहीं है: ऑटो और अंतरिम समाधान देता है। अगर मैं एक पाता हूं और कोई और सुझाव नहीं दे सकता तो मैं अपना खुद का समाधान प्रयोग और पोस्ट करूंगा। TIA। –