2012-01-10 23 views
7

सवाल राज्यों के रूप में के साथ चयन के संयोजन, मैं उपयोगकर्ता में एकाधिक divs उन divs का चयन करें और स्थानांतरित करने में सक्षम होने के साथ एक काम कर खींचें-एन-ड्रॉप इंटरफ़ेस में jQuery यूआई के Selectable और Draggable कार्यों गठबंधन करने के लिए कोशिश कर रहा हूँ jQuery DroppablesjQuery यूआई - खींचने योग्य

$('tr').selectable({ 
     filter: 'div', 
     selected: function(event, ui) { 
      $(ui.selected).draggable({ 
       containment: 'document', 
       axis: 'y', 
       snap: true, 
       snapMode: 'inner', 
       revert: 'invalid', 
       opacity: 0.8, 
       drag: function(e, ui) { 
        $('.ui-selected').css({ 
         top : ui.position.top //Y-Axis Only 
        }); 
        $('.ui-selected').addClass('ui-draggable-dragging'); 
       }, 
       stop: function() { 
        $('.ui-selected').removeClass('ui-selected ui-draggable'); 
       } 
      }); 
     } 
    }); 

आप देख सकते हैं, मैं जाना जाता कक्षाएं कि jQuery UI तत्व को कहते हैं जोड़ने की कोशिश की है:

यहाँ कोड मैं उपयोगकर्ता एक तालिका में एक पंक्ति में divs चयन करने के लिए अनुमति देने के लिए है ड्रैग/चयनित/आदि जा रहा है, लेकिन एकमात्र तत्व जो वास्तविक ड्रैगगेबल के रूप में कार्य करता है वह वह है जिसे उपयोगकर्ता ने क्लिक किया है (वास्तव में खींच रहा है)।

मेरे इच्छा उपयोगकर्ता पूरे चयनित समूह खींचें, और उन्हें draggables के रूप में सभी कार्य है (यानी: आदि अमान्य पर वापस लौटने, droppable में स्नैप,)

किसी को कैसे यह करने के लिए किसी भी विचार है या यहाँ से कहाँ जाना है?

इसके अलावा, यहां मेरा अनुमान लगाने के लिए jsfiddle है (और जहां मैं वर्तमान में इस पर हूं)। आपको परिणाम दृश्य का आकार बदलना पड़ सकता है ताकि तालिका कक्ष सभी समान चौड़ाई हो।

उत्तर

1

व्यवहार को अनुकरण करें। के रूप में मैन्युअल रूप से (आदि जैसे चेकबॉक्स, कस्टम शैली जोड़ने के लिए,) का चयन किया

  1. जब एकाधिक आइटम का चयन सिर्फ उन्हें चिह्नित
  2. जब खींचकर उपयोग खींचने योग्य विकल्प helper कस्टम क्लोन helper : function(){ return "<p>custom item</p>" }, परिभाषित करने के लिए इस अलग-अलग आइटम छुपा देगा। और आप चाहें अनुकूलित कर सकते हैं।
  3. कस्टम ड्रॉप कार्यान्वयन जो उन चयनित वस्तुओं का उपयोग उचित स्थान में जोड़ने के लिए करते हैं।
संबंधित मुद्दे