कर्सर को हथियाने के लिए सीएसएस (खींचें और छोड़ें)

Question

मेरे पास एक जावास्क्रिप्ट वेबप है जहाँ उपयोगकर्ता को पूरी स्क्रीन को घूमने के लिए पृष्ठभूमि को हथियाने की आवश्यकता है। इसलिए मैं चाहता हूं कि जब वे पृष्ठभूमि पर मँडरा रहे हों तो कर्सर बदल जाए। -moz-grabऔर -moz-grabbingसीएसएस कर्सर इस लिए आदर्श हैं। बेशक, वे केवल फ़ायरफ़ॉक्स में काम करते हैं ... क्या अन्य ब्राउज़रों के लिए समान कर्सर हैं? क्या मुझे मानक CSS कर्सर की तुलना में कुछ अधिक कस्टम करना होगा?

Answer 1

मुझे लगता है कि आप जो कर रहे हैं उसके लिए moveसंभवतः निकटतम मानक कर्सर मान होगा :

कदम
कुछ को स्थानांतरित करने के लिए इंगित करता है।

Comments

मैंने चाल आइकन देखा, सोचा कि हथियाने वाला आइकन बेहतर था। लेकिन अब जब आपने बताया कि w3c समझता है कि कर्सर "कुछ को स्थानांतरित करने के लिए इंगित करता है," यह सबसे अधिक समझ में आता है। धन्यवाद।

— पर।

@at: आप कॉमा-सीमांकित सूची में कई कर्सर निर्दिष्ट कर सकते हैं और उपयोगकर्ता एजेंट को पहले एक का उपयोग करना चाहिए जिसे वह समझता है। इसलिए आप -moz * वाले और "मूव" का उपयोग कमबैक के रूप में कर सकते हैं।

— म्यू

@muistooshort क्या आपको यकीन है कि अल्पविराम अभी भी काम करता है? मैं cursor:move; cursor:-webkit-grab; cursor:-moz-grab; cursor:grab;सबसे पसंदीदा अंतिम के साथ उपयोग कर रहा हूं ।

— बॉब स्टीन

@ BobStein-VisiBone: मुझे लगता है कि कुछ साल पहले वहाँ कुछ भ्रम हो सकता था। AFAIK कॉमा-सूची काम करता है आप निर्दिष्ट कर रहे है, जब अनेक स्वरूपों की तरह cursor: url(example.svg#linkcursor), url(hyper.cur), pointerकई संभव मानों के बजाय। मुझे लगता है कि आप दृष्टिकोण आवश्यक हो सकते हैं।

— म्यू 21

Answer 2

यदि कोई और व्यक्ति इस प्रश्न से लड़ता है, तो शायद यही है:

.grabbable {
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

 /* (Optional) Apply a "closed-hand" cursor during drag operation. */
.grabbable:active {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

Comments

किसी कारण से जब मैं माउस छोड़ता हूं तो केवल 'हथियाना' दिखाई देता है। किसी भी विचार यह क्यों है?

— जोना

@ जोना मेरा अनुमान है कि आपने grabbableकक्षा को किसी भी तत्व से नहीं जोड़ा है, जिसे पकड़ा जा सकता है, और जब आप घसीटे जाते हैं तो आप कक्षा को रोकते हैं।

— एमिल बर्जरॉन

अच्छा विस्तारित उत्तर, अतिरिक्त "हथियाने" को जोड़ने के लिए धन्यवाद। अच्छा स्पर्श। :)

— स्कॉटी स्वयं

इस समाधान से किसी को भी परेशानी होने के लिए, मुझे सादे चयनकर्ता के बजाय grabकर्सर को सेट करना था :hover, अर्थात .grabbable:hoverऊपर दिए गए उदाहरण में।

— मार्कस अमलथिया मैग्नसन

@ मेरे मामले में माता-पिता के <ul>बजाय इन शैलियों को जोड़ने <li>से समस्या हल हो गई

— आर्थर तारासोव

Answer 3

CSS3 grab और grabbingअब के लिए अनुमत मान हैं cursor। कस्टम कर्सर फ़ाइलों सहित क्रॉस-ब्राउज़र संगतता 3 के लिए कई कमियां प्रदान करने के लिए , एक पूर्ण समाधान इस तरह दिखाई देगा:

.draggable {
    cursor: move; /* fallback: no `url()` support or images disabled */
    cursor: url(images/grab.cur); /* fallback: Internet Explorer */
    cursor: -webkit-grab; /* Chrome 1-21, Safari 4+ */
    cursor:    -moz-grab; /* Firefox 1.5-26 */
    cursor:         grab; /* W3C standards syntax, should come least */
}

.draggable:active {
    cursor: url(images/grabbing.cur);
    cursor: -webkit-grabbing;
    cursor:    -moz-grabbing;
    cursor:         grabbing;
}

अपडेट 2019-10-07:

.draggable {
    cursor: move; /* fallback: no `url()` support or images disabled */
    cursor: url(images/grab.cur); /* fallback: Chrome 1-21, Firefox 1.5-26, Safari 4+, IE, Edge 12-14, Android 2.1-4.4.4 */
    cursor: grab; /* W3C standards syntax, all modern browser */
}

.draggable:active {
    cursor: url(images/grabbing.cur);
    cursor: grabbing;
}

Comments

आपका पोस्ट J.teve का एक डुप्लिकेट है

@ user2230470 यह दो महत्वपूर्ण बिंदुओं में भिन्न है: पहला, यह समर्थन नहीं करने वाले ब्राउज़रों के लिए एक कर्सर छवि प्रदान करता है grab, लेकिन कर्सर चित्र। दूसरा, विक्रेता के उपसर्गों के बाद मानकों का वाक्यविन्यास करना सबसे अच्छा है ।

— वोल्कर ई।

वास्तव में?! कैसे? इसके अलावा, मैं इस तरह के मानक प्रथाओं के बारे में अधिक जानकारी कहां मिल सकती है।

@ user2230470 - क्योंकि उन मामलों में जहां एक ब्राउज़र 2 व्यवहारों का समर्थन करता है, जहां एक उपसर्ग को मानक एक के अंतिम रूप से पहले थोड़ा लागू किया जा सकता है (और इसलिए अलग तरीके से कार्य कर सकता है) आप चाहते हैं कि यह मानक एक का उपयोग करें ... और जो भी परिभाषा आए। LAST वह है जिसे ब्राउज़र उपयोग करेगा। इसलिए मानक अंतिम होना चाहिए।

— जिमबो जॉनी

है images/grab.curकि मैं अपने वेब सर्वर पर होस्ट की जरूरत है एक छवि के लिए एक उदाहरण URL, या कि कुछ जादू आईई बात है?

— जॉन जेड

Answer 4

CSS कर्सर से "अधिक कस्टम" का अर्थ कुछ प्रकार का प्लगइन है, लेकिन आप CSS का उपयोग करके अपने स्वयं के कर्सर को पूरी तरह से निर्दिष्ट कर सकते हैं। मुझे लगता है कि इस सूची में वही है जो आप चाहते हैं:

.alias {cursor: alias;}
.all-scroll {cursor: all-scroll;}
.auto {cursor: auto;}
.cell {cursor: cell;}
.context-menu {cursor: context-menu;}
.col-resize {cursor: col-resize;}
.copy {cursor: copy;}
.crosshair {cursor: crosshair;}
.default {cursor: default;}
.e-resize {cursor: e-resize;}
.ew-resize {cursor: ew-resize;}
.grab {cursor: grab;}
.grabbing {cursor: grabbing;}
.help {cursor: help;}
.move {cursor: move;}
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nesw-resize {cursor: nesw-resize;}
.ns-resize {cursor: ns-resize;}
.nw-resize {cursor: nw-resize;}
.nwse-resize {cursor: nwse-resize;}
.no-drop {cursor: no-drop;}
.none {cursor: none;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
.progress {cursor: progress;}
.row-resize {cursor: row-resize;}
.s-resize {cursor: s-resize;}
.se-resize {cursor: se-resize;}
.sw-resize {cursor: sw-resize;}
.text {cursor: text;}
.url {cursor: url(https://www.w3schools.com/cssref/myBall.cur),auto;}
.w-resize {cursor: w-resize;}
.wait {cursor: wait;}
.zoom-in {cursor: zoom-in;}
.zoom-out {cursor: zoom-out;}

<h1>The cursor Property</h1>
<p>Hover mouse over each to see how the cursor looks</p>

<p class="alias">cursor: alias</p>
<p class="all-scroll">cursor: all-scroll</p>
<p class="auto">cursor: auto</p>
<p class="cell">cursor: cell</p>
<p class="context-menu">cursor: context-menu</p>
<p class="col-resize">cursor: col-resize</p>
<p class="copy">cursor: copy</p>
<p class="crosshair">cursor: crosshair</p>
<p class="default">cursor: default</p>
<p class="e-resize">cursor: e-resize</p>
<p class="ew-resize">cursor: ew-resize</p>
<p class="grab">cursor: grab</p>
<p class="grabbing">cursor: grabbing</p>
<p class="help">cursor: help</p>
<p class="move">cursor: move</p>
<p class="n-resize">cursor: n-resize</p>
<p class="ne-resize">cursor: ne-resize</p>
<p class="nesw-resize">cursor: nesw-resize</p>
<p class="ns-resize">cursor: ns-resize</p>
<p class="nw-resize">cursor: nw-resize</p>
<p class="nwse-resize">cursor: nwse-resize</p>
<p class="no-drop">cursor: no-drop</p>
<p class="none">cursor: none</p>
<p class="not-allowed">cursor: not-allowed</p>
<p class="pointer">cursor: pointer</p>
<p class="progress">cursor: progress</p>
<p class="row-resize">cursor: row-resize</p>
<p class="s-resize">cursor: s-resize</p>
<p class="se-resize">cursor: se-resize</p>
<p class="sw-resize">cursor: sw-resize</p>
<p class="text">cursor: text</p>
<p class="url">cursor: url</p>
<p class="w-resize">cursor: w-resize</p>
<p class="wait">cursor: wait</p>
<p class="zoom-in">cursor: zoom-in</p>
<p class="zoom-out">cursor: zoom-out</p>

स्रोत: CSS कर्सर प्रॉपर्टी @ W3Schools

Answer 5

आप अपने स्वयं के कर्सर बना सकते हैं और उन्हें उपयोग करने वाले कर्सर के रूप में सेट कर सकते हैं cursor: url('path-to-your-cursor');, या फ़ायरफ़ॉक्स ढूंढ सकते हैं और उन्हें कॉपी कर सकते हैं (बोनस: प्रत्येक ब्राउज़र में एक अच्छा सुसंगत रूप)।

Answer 6

मुझे देर हो सकती है, लेकिन आप निम्न कोड आज़मा सकते हैं, जो मेरे लिए ड्रैग एंड ड्रॉप का काम करता है।

.dndclass{
    cursor: url('../images/grab1.png'), auto; 

}

.dndclass:active {
    cursor: url('../images/grabbing1.png'), auto;
}

आप ऊपर दिए गए URL में नीचे दिए गए चित्रों का उपयोग कर सकते हैं। सुनिश्चित करें कि यह पीएनजी पारदर्शी छवि है। यदि नहीं, तो Google से एक डाउनलोड करें।

Answer 7

बंद हाथ कर्सर 16x16 नहीं है। यदि आपको उन्हें समान आयामों में आवश्यकता होगी, तो यहां आपके पास 16x16 px में दोनों हैं

या अगर आपको मूल श्राप चाहिए:

https://www.google.com/intl/en_ALL/mapfiles/openhand.cur https://www.google.com/intl/en_ALL/mapfiles/closedhand.cur