Tengo un div así, pero cuando arrastro este div, el cursor cambia automáticamente al disabled . ¿Cómo puedo arreglar esto?
div { background-color: red; width: 10px; height: 10px; cursor: e-resize; } <div draggable="true"></div> El div debe incluir el atributo draggable ya que lo necesito para otro uso.
El atributo draggable indica
si el elemento se puede arrastrar, ya sea con el comportamiento nativo del navegador o con la API de arrastrar y soltar de HTML .
Cuando un elemento se puede arrastrar usando este atributo, la API y el navegador controlan la apariencia del cursor durante el arrastre:
| cursor | sentido |
|---|---|
| discapacitado | no puedes soltar el bloque aquí |
| Copiar | el bloque arrastrado se copiará en la zona de colocación |
| moverse | el bloque arrastrado se moverá a la zona de colocación |
y así. Con los efectos de arrastre , puede definir qué sucederá con el bloque después de soltarlo, y el cursor cambiará su apariencia sobre la zona de colocación para sugerir al usuario qué destino le espera al bloque arrastrado.
También puede definir la imagen de arrastre , pero eso significa no cambiar el cursor, sino convertir el bloque arrastrado en una imagen :)
En esta demostración, el segundo bloque cambia al logotipo del sitio web después de un par de segundos de arrastrarlo. Y el cursor para ambos bloques arrastrables cambia sobre la zona de colocación según lo consideren adecuado la API y el navegador.
function imageOnDragging(event) { let img = new Image(); img.src = "https://stackoverflow.com/favicon.ico"; event.dataTransfer.setDragImage(img, 10, 10); } .demo { color: white; font: 15px Helvetica, sans-serif; margin-bottom: 10px; padding: 10px; width: 80px; height: 80px; } .drag-me { background-color: #369; } .drop-zone { background: #69c; float: right; width: 200px; height: 200px; } <div class="demo drop-zone" ondragover="event.preventDefault()">Drop zone</div> <div class="demo drag-me" draggable="true">Drag me</div> <div class="demo drag-me" draggable="true" ondragstart="imageOnDragging(event)">Image on dragging</div>Puede usar la interacción Arrastrable desde la interfaz de usuario de jQuery para omitir el atributo, simplificar su trabajo y poder controlar el cursor con CSS.
Agregue la :active para estilizar el estado de arrastre del bloque.
Esta demostración usa CSS para grab y grabbing el cursor del CodePen de Ben Kalsky . Puedes arrastrar y soltar el bloque donde quieras.
https://codepen.io/glebkema/pen/YzEyxxb
$(function() { $(".draggable-by-jquery-ui").draggable(); }); .demo { color: white; font: 15px Helvetica, sans-serif; padding: 10px; width: 80px; height: 80px; } .drag-me.draggable-by-jquery-ui { background-color: #f60; } .draggable-by-jquery-ui { cursor: url("https://www.google.com/intl/en_ALL/mapfiles/openhand.cur"), all-scroll; cursor: -webkit-grab; cursor: -moz-grab; cursor: -o-grab; cursor: -ms-grab; cursor: grab; } .draggable-by-jquery-ui:active { cursor: url("https://www.google.com/intl/en_ALL/mapfiles/closedhand.cur"), all-scroll; cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: -o-grabbing; cursor: -ms-grabbing; cursor: grabbing; } <div class="demo drag-me draggable-by-jquery-ui">Drag me wherever you want</div> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>draggable es obligatorio Por lo que puedo ver, jQuery UI le permite diseñar el cursor incluso si el bloque tiene el atributo draggable :
$(function() { $("[draggable=true]").draggable(); }); [draggable=true] { cursor: e-resize; } .demo { background-color: #f60; color: white; font: 15px Helvetica, sans-serif; padding: 10px; width: 80px; height: 80px; } <div class="demo" draggable="true">Fix the attribute</div> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>