jQuery UI सॉर्ट करने योग्य और:

हैंडल के लिए सक्रिय माउस कर्सर मैं सूची के आइटम्स को पुन: व्यवस्थित करने के लिए सॉर्ट करने योग्य का उपयोग करने का प्रयास कर रहा हूं। मुझे सूची के प्रत्येक आइटम के लिए एक हैंडल मिला है, जिसमें :hover और :active सीएसएस कर्सर सेटिंग्स हैं, ताकि जब उपयोगकर्ता हैंडल (और फिर खींचते समय) पर कर्सर बदलता है तो कर्सर बदल जाता है।jQuery UI सॉर्ट करने योग्य और:

<html> 
    <head> 
    <style> 
     span { width: 20px; background: red } 
     span:hover { cursor: -moz-grab; } 
     span:active { cursor: -moz-grabbing; } 
    </style> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> 
    <script> 
     $(function(){ 
     $('#sortable').sortable({ handle: 'span' }); 
     $('#sortable span').disableSelection(); 
     }); 
    </script> 
    </head> 
    <body> 
    <ul id="sortable"> 
     <li><span>grab 0 here</span> I'm 0!</li> 
     <li><span>grab 1 here</span> I'm 1!</li> 
     <li><span>grab 2 here</span> I'm 2!</li> 
     <li><span>grab 3 here</span> I'm 3!</li> 
     <li><span>grab 4 here</span> I'm 4!</li> 
     <li><span>grab 5 here</span> I'm 5!</li> 
     <li><span>grab 6 here</span> I'm 6!</li> 
     <li><span>grab 7 here</span> I'm 7!</li> 
    </ul> 
    </body> 
</html>

समस्या यह है कि :active कर्सर काम करना बंद कर देता है। मुझे यकीन नहीं है कि, यह काम करता है जब मैं sortable का उपयोग नहीं करता, लेकिन बाद में, जब मैं इसे फायरबग में पॉप करता हूं, तो मैं देख सकता हूं कि :hover कर्सर लागू किया जा रहा है, लेकिन :active पर कोई बदलाव नहीं है।

(सादगी के लिए, मैं अपने उपरोक्त उदाहरण में -moz-grab और -moz-grabbing का उपयोग कर रहा हूं, जो सभी ब्राउज़रों में काम नहीं करता है)।

कोई विचार गलत क्या हो सकता है?

स्रोत

2011-11-28 rampion

ठीक है, मैं अपनी समस्या को हल करने के लिए एक हैक के साथ आया था। यह हैकिश है, इसलिए अगर किसी को कुछ बेहतर मिला है, तो मुझे बताएं।

असल में, मैंने mousedown पर जोड़े गए कस्टम क्लास के पक्ष में :active को हटा दिया और mouseup पर हटा दिया।

<html> 
 

 
<head> 
 
    <style> 
 
    span { 
 
     width: 20px; 
 
     background: red 
 
    } 
 
    span:hover { 
 
     cursor: -moz-grab; 
 
    } 
 
    .grabbed:hover { 
 
     cursor: -moz-grabbing; 
 
    } 
 
    </style> 
 

 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> 
 
    <script> 
 
    $(function() { 
 
     $('#sortable').sortable({ 
 
     handle: 'span' 
 
     }); 
 
     $('#sortable span').disableSelection(); 
 
     $('#sortable span').mousedown(function() { 
 
     $(this).addClass('grabbed') 
 
     }); 
 
     $('#sortable span').mouseup(function() { 
 
     $(this).removeClass('grabbed') 
 
     }); 
 
    }); 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <ul id="sortable"> 
 
    <li><span>grab 0 here</span> I'm 0!</li> 
 
    <li><span>grab 1 here</span> I'm 1!</li> 
 
    <li><span>grab 2 here</span> I'm 2!</li> 
 
    <li><span>grab 3 here</span> I'm 3!</li> 
 
    <li><span>grab 4 here</span> I'm 4!</li> 
 
    <li><span>grab 5 here</span> I'm 5!</li> 
 
    <li><span>grab 6 here</span> I'm 6!</li> 
 
    <li><span>grab 7 here</span> I'm 7!</li> 
 
    </ul> 
 
</body> 
 

 
</html>

स्रोत

2011-11-28 22:10:21 rampion

<html> 
 

 
<head> 
 
    <style> 
 
    .grab { 
 
     cursor: hand; 
 
     cursor: grab; 
 
     cursor: -moz-grab; 
 
     cursor: -webkit-grab; 
 
    } 
 
    .grabbing { 
 
     cursor: grabbing; 
 
     cursor: -moz-grabbing; 
 
     cursor: -webkit-grabbing; 
 
    } 
 
    </style> 
 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> 
 
    <script type="text/javascript"> 
 
    $(function() { 
 
     $(document).on('mousedown mouseup', '.grab, .grabbing', function(event) { 
 
     $(this).toggleClass('grab').toggleClass('grabbing'); 
 
     }); 
 
     $('#drag').draggable(); 
 
    }); 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <div id="drag" class="grab" style="width: 200px;height:200px;">Grab Me</div> 
 
</body> 
 

 
</html>

नई .on/jQuery कार्यों .off के साथ अलग संचालकों के लिए कोई ज़रूरत नहीं

स्रोत

2012-01-20 00:53:58 oLinkWebDevelopment

आपका स्निपेट नहीं रह गया काम करने –

थोड़ा देर से जवाब है, लेकिन आप उपयोग कर सकते हैं jQuery UI sortableoption cursor

$('#sortable').sortable({ 
    cursor: "grabbing" 
});

तो आप अतिरिक्त jquery और css से बच सकते हैं।

<html> 
    <head> 
    <style> 
     span { width: 20px; background: red } 
     span:hover { cursor: -moz-grab; } 
    </style> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> 
    <script> 
     $(function(){ 
     $('#sortable').sortable({ 
      handle: 'span', 
      cursor: 'grabbing' 
     }); 
     $('#sortable span').disableSelection(); 
     }); 
    </script> 
    </head> 
    <body> 
    <ul id="sortable"> 
     <li><span>grab 0 here</span> I'm 0!</li> 
     <li><span>grab 1 here</span> I'm 1!</li> 
     <li><span>grab 2 here</span> I'm 2!</li> 
     <li><span>grab 3 here</span> I'm 3!</li> 
     <li><span>grab 4 here</span> I'm 4!</li> 
     <li><span>grab 5 here</span> I'm 5!</li> 
     <li><span>grab 6 here</span> I'm 6!</li> 
     <li><span>grab 7 here</span> I'm 7!</li> 
    </ul> 
    </body> 
</html>

स्रोत

2015-09-20 13:47:05

यह अभी भी समस्या को ठीक करने के लिए –

प्रतीत नहीं होता लगता है @ 99Problems-Syntaxain'tone jqueryui का कौन सा संस्करण आपने कोशिश की है और काम नहीं किया है? जवाब 1.5 साल पुराना है ... और तब से इसका उपयोग नहीं किया है –

आप jQuery ui का उपयोग कर रहे हैं, तो सबसे आसान तरीका सीएसएस वर्गों का उपयोग करने के लिए है:

.draggable-item { 
    cursor: pointer; // Fallback 
    cursor: -webkit-grab; 
} 

draggable-item:active, 
draggable-item.ui-draggable-dragging { 
    cursor: -webkit-grabbing; 
}

स्रोत

2017-04-11 13:25:06

उत्तर

संबंधित मुद्दे