Обновление номера в подсказках jQuery UI

Question

Обновление номера в подсказках jQuery UI

0

У меня есть папки с подсказками, такими как "0 записей" или "5 записей" и т.д. Мне нужно, чтобы этот номер всплывающей подсказки обновлялся по 1 каждый раз, когда что-то было сброшено в папку. Название не всегда начинается с нуля, и мне нужно обновить drop() drop, так как у меня много. Вот рабочая скрипка http://jsfiddle.net/4ehSG/3

JQuery

$(document).tooltip();

var dropped =0;

$( ".draggable" ).draggable();
    $( ".droppable" ).droppable({
      drop: function( event, ui ) {
        dropped++;
          $( this )
          .attr('title',dropped+' entries')
          .addClass( "ui-state-highlight" )
          .find( "p" )
            .html( "Dropped!" );
          $( ".draggable" ).fadeOut();
      }
    });

HTML

<div class="draggable ui-widget-content">
  <p>Drag me to my target</p>
</div>

<div class="droppable ui-widget-header" title='2 entries'>
  <p>Drop here</p>
</div>

triplethreat77 17 сен. 2013, в 19:06

Источник

Теги:

javascript

jquery

html

css

tooltip

5 ответов

1

Если у вас есть несколько экземпляров droppable и draggable, вы можете захотеть дать каждому droppable связанный с ним массив. Таким образом, вам не нужно полагаться на объект count и вы можете удалить одно и то же draggable на несколько объектов с возможностью droppable.

DEMO

$(document).tooltip();
$( ".draggable" ).draggable();
$( ".droppable" ).droppable({
    drop: function( event, ui ) {
        if(!$(this).data('droplist')){ //check for array
            $(this).data('droplist', []); //if doesn't exist, create array
        }
        var droplist = $(this).data('droplist'),
            drag = $(ui.draggable)[0];

        if(droplist.indexOf(drag) === -1) //check if element exists in array
            droplist.push(drag);

        $( this )
        .addClass( 'ui-state-highlight' )
        .find( 'p' )
        .html( 'Dropped!' )
        .end()
        .attr('title', droplist.length + ' entries');

         $(this).data('droplist', droplist); //set list
    }
});

Dom 17 сен. 2013, в 15:15

1

Вы можете увеличивать переменную каждый раз, когда элемент выпадает

попробуй это

$(document).tooltip();
var num = 0;
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
    drop: function( event, ui ) {
        $( this )
        .addClass( "ui-state-highlight" )
        .find( "p" )
        .html( "Dropped!" );
        num++;

        $( "#draggable" ).fadeOut();
        $( "#droppable" ).attr("title", num + " entries");
  }
});

ваш обновленный пример: http://jsfiddle.net/4ehSG/4/

lionheart98 17 сен. 2013, в 14:01

0

DEMO

$(document).tooltip();

var count = 0;

$("#draggable").draggable();
$("#droppable").droppable({
    drop: function (event, ui) {
        count++;
        $(this)
            .attr('title', count + ' entries')
            .addClass("ui-state-highlight")
            .find("p")
            .html("Dropped!");
        $("#draggable").fadeOut();
    }
});

Tushar Gupta 17 сен. 2013, в 15:37

0

Вы можете использовать:

document.getElementById('droppable').title = value;

Вышеприведенная строка кода не использует jQuery.

Если вы хотите использовать jQuery, используйте следующее:

$("#droppable").attr( 'title', value );

Frax 17 сен. 2013, в 14:36

Ещё вопросы

dwaddell · Accepted Answer · 2013-09-17T15-44-00.000Z

Вот пример того, что вы можете сделать: http://jsfiddle.net/4ehSG/9/

  drop: function( event, ui ) {
      var dropped = parseInt($(this).attr('title')) + 1;
      $( this )
      .attr('title',dropped+' entries')
      .addClass( "ui-state-highlight" )
      .find( "p" )
        .html( "Dropped!" );
      $( ".draggable" ).fadeOut();
  }

Это работает хорошо, но заголовок не всегда начинается с 0. Обновлен с другими классами и вместо идентификаторов. У меня много перетаскиваемых фрагментов, и мне нужно обновить $ (this) drop div. jsfiddle.net/4ehSG/3
Я обновил ответ, пожалуйста, попробуйте еще раз.