Вопрос по – Как вызвать JQuery .draggable () для элементов, созданных шаблонами?

7

У меня есть стандартный шаблон в Html-файле, как:

<code><template name="cards">
  {{#each all_cards}}
    {{> card_item}}
  {{/each}}
</template>
<template name="card_item">
  <div class="card" style="left:{{position.x}}px; top:{{position.y}}px">
    {{title}}
  </div>
</template>
</code>

Я хочу, чтобы карты (css selector .card) стали перетаскиваемыми с помощью JQuery. Теперь, когда Meteor автоматически обновляет DOM с помощью шаблона, когда и как я узнаю, где вызывать .draggable () для чего?

РЕДАКТИРОВАТЬ: Это пока мое решение, которое делает ожидающие движения на другом клиенте видимыми с помощью анимации колебания (с использованием CSS3):

<code>Template.card_item.events = {
'mouseover .card': function (e) {
    var $target = $(e.target);
    var $cardContainer = $target.hasClass('card') ? $target : $target.parents('.card');     
    $cardContainer.draggable({containment: "parent", distance: 3});
},
'dragstart .card': function (e) {
    Session.set("dragging_id", e.target.id);
    $(e.target).addClass("drag");
    pos = $(e.target).position();
    Events.insert({type: "dragstart", id:e.target.id, left: pos.left, top: pos.top});       
},
'dragstop .card': function (e) {
    pos = $(e.target).position();
    Events.insert({type: "dragstop", id:e.target.id, left: pos.left, top: pos.top});        
    Cards.update(e.target.id, {$set: {left:pos.left, top:pos.top}});
    Session.set("dragging_id", null);
}
}

Events.find().observe({
added: function(event) {
    if (event.type == "dragstart" && !Session.equals("dragging_id", event.id)) {
        $("#"+event.id).draggable({disabled: true});
        $("#"+event.id).addClass("wobble");             
    }
    if (event.type == "dragstop" && !Session.equals("dragging_id", event.id)) {
        $("#"+event.id).animate({left: event.left, top: event.top}, 250);           
        Events.remove({id:this.id});  
        $("#"+event.id).draggable({disabled: false});
    }
}
});
</code>
Хорошо, смотрите обновление,Meteor.defer не следует использовать в этом случае .. Michel Löhr
Я проверил это, интересно .... Michel Löhr
Спасибо, я проверю это! - Круто, это работает, спасибо! Michel Löhr
Приветствия, пожалуйста. Кроме того, я только что узнал, что meteor.defer - это просто оболочка для setTimeout, типаMeteor.defer в консоли без аргументов, чтобы понять, что я имею в виду. lashleigh
ИспользуйтеMeteor.defer, этого нет в документации, но этот вопрос объясняет это. Я использую его, чтобы сделать список сортируемым в данный момент, и он работает хорошо. / Stackoverflow.com вопросы / 10109788 / ... lashleigh

Ваш Ответ

1   ответ
6

EDIT: этот подход не работает в последних версиях Meteor, например v0.5.0. Смотри мойкомментари ниже.

Похоже, мы работаем над похожими вещами! У меня есть рабочее доказательство концепции простого приложения Magic: The Gathering. Вот как я реализовал перетаскивание в данный момент:

В<head> раздел в одном из ваших html-файлов, включая скрипт jQuery UI:

<script src="jquery-ui-1.8.20.custom.min.js"></script>

Затем в файле js убедитесь, что элементы становятся перетаскиваемыми при наведении курсора примечание: это неоптимально для сенсорных экранов, поскольку для перетаскивания требуется два прикосновения ... Я ищу лучшее решение для сенсорного экрана):

Template.card_item.events['mouseover .card, touchstart .card'] = function (e) {
    var $target = $(e.target);
    if (!$target.data('isDraggable')) {
      $target.data('isDraggable', true).draggable();
    }
};

И, наконец, разберись сdrag а такжеdragstop Мероприяти:

var prevDraggedTime = 0

Template.card_item.events['drag .card'] = function (e) {
    // get the cardId from e
    var now = new Date().getTime();
    var position;

    if (now - prevDraggedTime > 250) {
        position = $(e.target).position();
        Cards.update(cardId, {$set: {x: position.top, y: position.left}});
        prevDraggedTime = now;
    }
}

Template.card_item.events['dragstop .card'] = function (e) {
    // get the cardId from e
    var position = $(e.target).position();
    Cards.update(cardId, {$set: {x: position.top, y: position.left}});
}
Да, это было только для демонстрации концепции. В моем фактическом коде я обновляю позицию наdragstop, а затем один раз каждые 250 мс наdrag. Emmett
Я не думаю, что обновление "drag" - это хорошая идея. Это могут быть сотни обновлений даже для небольшого сопротивления. Просто обновите информацию по dragend и используйте преобразование css3, чтобы плавно переместить все на других клиентов. lashleigh
Спасибо, с твоей помощью я использовал функцию отсрочки, используя твои настройки. Michel Löhr
Cool, это имеет больше смысла. Я думаю, что стоило бы сказать так же в вашем ответе. lashleigh
@ lashleigh Спасибо за отзыв; Я отредактировал ответ. Emmett

Похожие вопросы