Javascript / php aracılığıyla 'hareket' veya 'kaldır' düğmesini kullanarak, liste Eşyaları kendileri değil tıklayarak belirli bir listeye (farklı alanlarda) iki liste liste öğeleri taşımak için nasıl?

2 Cevap php

Ben öğelerin bir listesini kurma ve birbirleri arasında taşırken bazı sorunlar sahip oldum.

Belirtilen bir listesine taşımak için her öğenin içindeki bir bağlantı ile, birden çok liste olması mümkün mü? eylem yanında bir artı ile eylemleri, yani listesi, artı tıklayın ve belirtilen bir kutuya taşımak? Ayrıca, bu sayfadan (kod sanırım ediyorum inline olması gerekir) ve aynı zamanda özel listede bu isimleri taşımak daha sonra bir lightbox yüklemek mümkün olurdu?

Example Images

Çok teşekkürler!

Şimdiye kadar benim çabaları daha geniş bakış ...

İlk sorun, ben nedeniyle onların her tarayıcı içinde doğal işlenen için ListBoxes kullanabilirsiniz olamayacağını olmak. Listboxes sayesinde ben ama (stackoverflow üzerinde bulunan) aşağıdaki kod ile bir tetikleyici ile, bu kurmak başardı. Bana kısmi işlevler verirken ben arıyordum hedefi alamadım.

document.getElementById('moveTrigger').onclick = function() {

var listTwo = document.getElementById('secondList');
var options = document.getElementById('firstList').getElementsByTagName('option');

while(options.length != 0) {
    listTwo.appendChild(options[0]);
}

}

Daha sonra jQueryUI sortable üzerine taşındı ve birden bağlamak yeteneği, ve en önemlisi, stil-mümkün listeleri ve birbirleriyle sürüklenerek. Bu yan tablolar tarafından tarafı için çalışıyor, ama ben genel olarak arıyordum kullanılabilirlik sunmuyor.

Yani, ben ileriye taşımak için nereye kadar emin değilim yere geldim. PHP etrafında alabilirsiniz, ben nerede şahsen bu biriyle başlamak bilemeyiz. Ben her türlü seçeneklerine açığım!

Çok teşekkürler!

2 Cevap

Ben doğru anlamak, iki liste arasında öğe taşımak istiyorum. Bir şey liste A tıklandığında, bu B. listelemek taşındı olması gerekiyordu ve B listesinde bir öğe tıklandığında, o A. listeye taşınacak olmalıdır

Bir listenin yapısını varsayarak gibi görünüyor:

<div id="listA">
    <div class="listItem">
        <input type="button" class="action" value="+" />
        Action 1
    </div>
    ...
    ...
</div>

You could use live or delegate to assign the events on the list elements once. On listA, we would do:

$("#listA").delegate(".action", "click", function() {
    var item = $(this).closest('.listItem');
    $(this).val('-');
    $("#listB").append(item);
});

Bu sınıf ile herhangi bir elemanı action içine tıklandığında zaman #listA, ardından (listItem) onun tarafından temsil öğeyi bulmak ve B. listelemek için hareket etmek demektir Benzer şekilde, B listesinde, biz tersini yapın:

$("#listB").delegate(".action", "click", function() {
    var item = $(this).closest('.listItem');
    $(this).val('+');
    $("#listA").append(item);
});

You could also try the jQuery-UI Framework which provides you with a large choice of interface-widgets and much more.
Find it here: jQuery UI (The link should take you directly to sortable lists).

Uygulaması çok etkili ve Javascript-Kütüphaneler Google'ın CDN ile kolay (sadece "Google AJAX Kütüphaneleri API" için arama ve onu bulacaksınız)

etiketler