एचटीएमएल 5, खींचने योग्य और contenteditable एक साथ

Question

काम नहीं कर रहा एक draggable विशेषता एक माता पिता के तत्व (<li>) पर सक्षम है जब मैं नहीं कर सकते अपने बच्चे तत्व (<a>) पर contenteditable काम करते हैं।

फोकस बच्चे तत्व (<a>) पर केंद्रित है, लेकिन मैं इसे बिल्कुल संपादित नहीं कर सकता।

इस नमूने

की जांच करें

http://jsfiddle.net/pavank/4rdpV/11/

संपादित करें: जब मैं आज <li>

Answer 1

मैं एक ही समस्या में आए पर draggable अक्षम करें, और एक समाधान पाया मैं सामग्री को संपादित कर सकते हैं [jQuery का उपयोग कर]

$('body').delegate('[contenteditable=true]','focus',function(){ 
    $(this).parents('[draggable=true]') 
      .attr('data-draggableDisabled',1) 
      .removeAttr('draggable'); 
    $(this).blur(function(){ 
     $(this).parents('[data-draggableDisabled="1"]') 
       .attr('draggable','true') 
       .removeAttr('data-draggableDisabled'); 
    }); 
}); 

$('body') कुछ और विशिष्ट द्वारा प्रतिस्थापित किया जा सकता है।

यदि नया contenteditable तत्व रनटाइम में नहीं जोड़े जाते हैं, तो delegate के बजाय bind का उपयोग कर सकते हैं।

Answer 2

नोट: यह एक समाधान नहीं है के बाद से मेरा मानना ​​है कि अक्षमता इन दो कार्यक्षमताओं एक साथ काम करने के लिए रहता है एचटीएमएल कल्पना ही (यानी एक साथ काम नहीं कर में बात जानबूझकर है के बाद से ब्राउज़र निर्धारित नहीं कर सकता है कि क्या आप चाहते हैं ध्यान केंद्रित करने या mousedown घटना पर खींचें करने के लिए)

---

मैं तुम्हें स्पष्ट रूप से सेट 'नहीं पुस्तकालयों' देखा, तो मैं एक कच्चे जावास्क्रिप्ट/एचटीएमएल 5 का जवाब

http://jsfiddle.net/4rdpV/26/

यह इस पर मेरी दरार था प्रदान करेगा।

सबसे पहले, डेटा को एक ही स्थानीय स्टोरेज आइटम में स्कैटर करने के बजाय बेहतर करना बेहतर हो सकता है।

storage={ 
    '1.text':'test 1', 
    '2.text':'test 2' 
} 
if(localStorage['test']){ 
    storage=JSON.parse(localStorage['test']) 
} 

यह ऑब्जेक्ट और स्ट्रिंग के बीच परिवर्तित करने के लिए JSON का उपयोग करके उस क्षमता को बनाता है। वस्तुओं को वास्तव में घोंसला

मैंने आइटम के बगल में (edit) लिंक भी जोड़े, जब क्लिक किया गया, तो ये लिंक आइटम को input तत्वों में बदल देंगे, ताकि आप टेक्स्ट को संपादित कर सकें। प्रवेश करने के बाद, यह इसे वापस बदल देता है और डेटा बचाता है। उसी समय, सूची आइटम खींचने योग्य रहते हैं।

सहेजने के बाद, क्रोम में F12 मारा, सांत्वना मिल जाए, और localStorage वस्तु में देखें, तो आप सभी डेटा एक वस्तु का उपयोग कर JSON.stringify()

मैं अपना सर्वश्रेष्ठ करने की कोशिश की करने के लिए इस डिजाइन करने के लिए के रूप में localStorage['test'] में बचा लिया गया था देखेंगे स्केल करने योग्य हो, और मुझे लगता है कि मैं काफी सफल रहा; आपको केवल एक कंटेनर के साथ एचटीएमएल को प्रतिस्थापित करने की आवश्यकता है और edit() के पैरामीटर को भरने के लिए अपनी पसंद के इटरेटर का उपयोग करके कई वस्तुओं को लिखने के लिए लूप के लिए जावास्क्रिप्ट का उपयोग करना होगा। उदाहरण के लिए:

कहें कि आपने सूचियों के "प्रतिमान" को पकड़ने के लिए भंडारण बदल दिया है, और आपके पास "शॉपिंग सूची" कहा जाता है।और कहते हैं कि भंडारण वस्तु इस तरह दिखता है:

{ 
    "shopping list":{ 
     1:"Milk", 
     2:"Eggs", 
     3:"Bread" 
    } 
} 

यह है कि सूची प्रस्तुत करना सकता है:

for(i in storage['shopping list']){ 
    _item = storage['shopping list'][i]; 
    container.innerHTML+='<li draggable=true><a id="item'+i+'">'+_item+'</a><a href="#" onclick="edit('+i+')"> (edit)</a></li>' 
} 

बेशक

, यदि आप भंडारण वस्तु की संरचना संपादित करने के लिए थे, तो आप करने की आवश्यकता होगी कार्यों को भी संपादित करें।

उत्पादन कुछ इस तरह दिखेगा:

Milk (edit) 
Eggs (edit) 
Bread (edit) 

इनपुट तत्वों के बारे में चिंता मत करो कि यदि आप चिंता; सीएसएस आसानी से इसे ठीक करने के लिए ठीक कर सकता है जैसे यह नहीं बदला।

आप (edit) लिंक दिखाई दे सकता है नहीं करना चाहते हैं, उदाहरण के लिए, तो आप इस सीएसएस में कर सकते हैं:

a[href="#"]{ 
    display:none; 
} 
li[draggable="true"]:hover a[href="#"]{ 
    display:inline; 
} 

अब संपादित करें लिंक केवल तभी दिखाई देगा जब आप सूची आइटम पर माउस को हॉवर , इस संस्करण की तरह:

http://jsfiddle.net/4rdpV/27/

---

मुझे आशा है कि इस उत्तर में मदद मिलेगी।

Answer 3

यह समझ में आता है कि draggable और contenteditable गुण टकराएंगे। contenteditable तत्व, किसी भी पाठ फ़ील्ड की तरह, mousedown पर ध्यान केंद्रित करेंगे (क्लिक नहीं)। draggable तत्व mousemove के आधार पर संचालित होते हैं, लेकिन सामग्री को सामग्रीग्रस्त तत्व में पाठ का चयन करते हैं, तो ब्राउज़र यह निर्धारित करेगा कि आप तत्व को खींचने या टेक्स्ट का चयन करने का प्रयास कर रहे हैं या नहीं? चूंकि गुण एक ही तत्व पर सह-अस्तित्व में नहीं हो सकते हैं, ऐसा लगता है कि आपको जावास्क्रिप्ट समाधान की आवश्यकता है।

अपने एंकर टैग करने के लिए इन दो विशेषताओं जोड़ने का प्रयास करें:

onfocus="this.parentNode.draggable = false;" 
onblur="this.parentNode.draggable = true;" 

कि मेरे लिए काम करता है अगर मैं अपने jsFiddle में <a> टैग में जोड़ें। यदि आप parentNode प्राप्त करने से अधिक जटिल हैं तो आप jQuery का भी उपयोग कर सकते हैं।

Answer 4

html5sortable और नए JQuery ईवेंट का उपयोग (प्रतिनिधि को हटा दिया गया है, प्रारंभिक प्रश्न के 3 साल बाद उत्तर दें), बग अभी भी क्रोम 37 को प्रभावित करता है। Contentitable spans और html5sortable अन्य ब्राउज़रों में अच्छा खेलना प्रतीत होता है। मुझे पता है कि यह केवल आंशिक रूप से प्रासंगिक है, केवल मैंने देखा है कि परिवर्तनों पर दस्तावेज़ीकरण रखना।

$(document).on('focus', 'li span[contenteditable]', function() { 
    $(this).parent().parent().sortable('destroy'); // removes sortable from the whole parent UL 
}); 

$(document).on('blur', 'li span[contenteditable]', function() { 
    $(this).parent().parent().sortable({ connectWith: '.sortable' }); // re-adds sortable to the parent UL 
});