[jQuery] drag & drop. ma prima di droppare controlla se c'è già

**lnessuno** · 26-05-2008, 18:13

ho bisogno di realizzare, tramite jquery, una piccola form creata dinamicamente tramite drag & drop. tutto figoso, però ho bisogno, prima di effettuare il drop, di controllare che non ci sia già un elemento con lo stesso id

questo è il mio attuale codice.

codice:

<script type='text/javascript'>
	$(document).ready(function(){
		$(".imgblock").draggable({helper: 'clone'});
		$("#drop").droppable({
			accept: ".imgblock",
			drop: function(ev, ui) {
				var img_src = $(ui.draggable).attr('src');
				var img_id = $(ui.draggable).attr('id');
				var tag_img = "[img]" + img_src + "[/img]";
				var tag_id = "<input type='text' name='id' value='" + img_id + "'>";
				var text_id = "<input type='text' name='description' value='" + img_id + "'>";
				$('#listfiles').append('
' + tag_img + tag_id + text_id);
			}
		});
	});
</script>

cioè adesso funziona tutto, però non facendo il controllo mi trovo con degli elementi duplicati e non ha nessun senso... come posso evitare questo comportamento? ho provato a sfogliare la documentazione di jquery, ma non ho trovato nulla che facesse al caso mio...

**lnessuno** · 28-05-2008, 15:23

up

**Graboid** · 28-05-2008, 18:23

c'è un parametro connectWith o qualcosa di simile ch eti permettere di togliere da una parte e droppare dall'altra, forse fa al caso tuo

**lnessuno** · 29-05-2008, 17:44

sto provando con connectWith, e sembra funzionare... ma ha uno strano comportamento: i blocchi vengono disposti in maniera apparentemente casuale :master:

Codice PHP:


<html>

<head>

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

    <script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/1.5b2/ui.base.js"></script>

    <script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/1.5b2/ui.sortable.js"></script>

    <script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/1.5b2/ui.draggable.js"></script>

    

    <script type='text/javascript'>

        $(document).ready(function(){

            $('#elenco1 .block').draggable({

                cursor: 'move',

                connectToSortable: '#target'

            });



            $('#target').sortable({

                cursor: 'move',

                connectWith: ['#elenco1']

            });

        }); 

    </script>

    <style type='text/css'>

        #elenco1 {

            float: left;

            display: block;

            height: 200px;

            width: 100px;

            background-color: #999;

            }

        .block {

            display: block;

            height: 20px;

            width: 30px;

            margin: 5px;

            }

        #target {

            display: block;

            vertical-align: top;

            text-align: left;

            margin-left: 150px;

            height: 200px;

            width: 100px;

            background-color: #bdf;

            }

    </style>

</head>

<body>

<div id='elenco1'>

    <div class='block' style='background-color:#aaa;'></div>

    <div class='block' style='background-color:#ccc;'></div>

    <div class='block' style='background-color:#eee;'></div>

</div>

<div id='target'></div>



</body>

</html>

Discussione: [jQuery] drag & drop. ma prima di droppare controlla se c'è già

Strumenti discussione

Ricerca discussione

Visualizza

[jQuery] drag & drop. ma prima di droppare controlla se c'è già

Permessi di invio